Κατακτήστε το Responsive Web Design με μαθηματικές λειτουργίες CSS

Τα μαθηματικά είναι καλά, τα μαθηματικά είναι υπέροχα, αλλά θέλετε να αφιερώσετε τον χρόνο σας κάνοντας υπολογισμούς όταν το φύλλο στυλ σας μπορεί να το κάνει για εσάς;

Το CSS συνοδεύεται από τρεις εύχρηστες μαθηματικές συναρτήσεις που θα αλλάξουν τον τρόπο που σχεδιάζετε τους ιστότοπούς σας. Θα σας δείξουμε πώς και γιατί πρέπει να τα χρησιμοποιείτε.

Εισαγωγή στα Μαθηματικά στο CSS

Το CSS είναι κυρίως δηλωτικό, αλλά οι αναθεωρήσεις έχουν εισαγάγει λειτουργίες στη γλώσσα. Υπάρχουν τώρα πολλές συναρτήσεις στην προδιαγραφή, και τρεις από τις απλούστερες μαθηματικές μπορούν να αποδειχθούν πολύ χρήσιμες: calc, max και min.

Μπορείς να χρησιμοποιήσεις αυτό το απλό παράδειγμα CodePen για να σας βοηθήσει να ακολουθήσετε τον οδηγό.

CSS calc() Μαθηματική συνάρτηση

Η συνάρτηση CSS calc() εκτελεί έναν απλό υπολογισμό και χρησιμοποιεί το αποτέλεσμα ως τιμή ιδιότητας. Αυτό σημαίνει ότι μπορείτε να εκχωρήσετε δυναμικές τιμές σε ιδιότητες όπως ύψος και πλάτος, όλες χωρίς Ερωτήματα CSS @media.

Αυτή η συνάρτηση υποστηρίζει πρόσθεση (+), πολλαπλασιασμό (*), αφαίρεση (-) και διαίρεση (/) με έναν μόνο τελεστή.

Παράδειγμα: Δημιουργία ομοιόμορφης απόστασης μεταξύ των μεγεθών της οθόνης

Το να κάνετε μια ιστοσελίδα να φαίνεται ίδια σε διαφορετικά μεγέθη μπορεί να είναι δύσκολο, ακόμα κι αν χρησιμοποιείτε δυναμικές μονάδες CSS όπως το vw και το %. Η συνάρτηση CSS calc() αλλάζει αυτό.

Όπως μπορείτε να δείτε στην παραπάνω εικόνα, η γραμμή τίτλου που περνάει στην οθόνη έχει διαφορετική απόσταση ανάλογα με το μέγεθος της οθόνης. Αυτό συμβαίνει επειδή έχουμε ορίσει το πλάτος στα 80vw, ρυθμίζοντας το διάστημα στα 20vw. μια μεταβλητή τιμή.

Αν χρησιμοποιήσουμε calc() αντ' αυτού, μπορούμε να ρυθμίσουμε το διάστημα να είναι το ίδιο σε οποιοδήποτε μέγεθος οθόνης. Η ιδιότητα που χρησιμοποιούμε για αυτό μοιάζει με αυτό:

πλάτος: υπολογισμός (100vw - 400px);

Αυτό ορίζει το πλάτος της γραμμής τίτλου μας σε 400 pixel μικρότερο από το πλάτος της σελίδας, δημιουργώντας ομοιόμορφα κενά ανεξάρτητα από το μέγεθος της οθόνης.

CSS max() Μαθηματική συνάρτηση

Η συνάρτηση CSS max() επιλέγει την υψηλότερη τιμή από μια ομάδα για να προσθέσει μια τιμή σε μια ιδιότητα CSS. Μπορείτε να προσθέσετε όσες πιθανές τιμές θέλετε, με κάθε μία να διαχωρίζεται με κόμμα, αλλά θα χρησιμοποιεί μόνο την υψηλότερη.

Παράδειγμα: Περιορισμός ύψους γραμμής πλοήγησης

Μία από τις βασικές προκλήσεις που συνοδεύει το responsive web design είναι ο προσανατολισμός. Ένας ιστότοπος που λειτουργεί σε μια μεγάλη οθόνη υπολογιστή με πορτραίτο πρέπει επίσης να φαίνεται καλός σε μια μικρότερη οθόνη κινητού με πορτρέτο.

Αυτό μπορεί να κάνει μια αξία ιδιοκτησίας να φαίνεται εξαιρετική σε επιτραπέζιους υπολογιστές και κακή σε κινητά, όπως φαίνεται στην παραπάνω εικόνα. Η γραμμή πλοήγησής μας έχει καθορισμένο ύψος 10 vh, αλλά αυτό κάνει τη γραμμή να φαίνεται λεπτή στις επιτραπέζιες συσκευές.

Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση CSS max() για να λύσουμε αυτό το πρόβλημα:

ύψος: μέγιστο (10vh, 80px);

Προσθέτοντας έναν κανόνα σαν αυτόν, μπορούμε να ορίσουμε ένα ελάχιστο ύψος 80 px για τη γραμμή πλοήγησής μας, διατηρώντας παράλληλα την τιμή των 10vh εάν είναι υψηλότερη.

CSS min() Μαθηματική συνάρτηση

Η συνάρτηση min() μοιάζει με τη συνάρτηση max(), αλλά επιλέγει τη χαμηλότερη τιμή από ένα pool για να χρησιμοποιηθεί ως τιμή ιδιότητας.

Παράδειγμα: Ορισμός μέγιστου μεγέθους κειμένου

Είτε χρησιμοποιείτε μια δυναμική τιμή είτε όχι, λήψη του μεγέθους κειμένου σε όλες τις πλατφόρμες μπορεί να είναι δύσκολο. Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση CSS min() για να ορίσουμε δύο ή περισσότερες πιθανές τιμές ιδιοτήτων για το κύριο μέγεθος κειμένου κεφαλίδας και θα χρησιμοποιήσει τη μικρότερη.

Χρησιμοποιώντας ένα μέγεθος γραμματοσειράς: 10vh; Η ιδιότητα στο κύριο κείμενο της κεφαλίδας στο παράδειγμά μας κάνει το κείμενο να φαίνεται υπέροχο σε επιτραπέζιους υπολογιστές, αλλά πολύ μεγάλο σε κινητές συσκευές.

Για να το αλλάξετε αυτό, μπορείτε να χρησιμοποιήσετε τη συνάρτηση CSS min() για να παρέχετε εναλλακτικό μέγεθος:

μέγεθος γραμματοσειράς: min (10vh, 10vw);

Αυτό το παράδειγμα λειτουργεί επειδή οι οθόνες κινητών είναι ψηλές και λεπτές, ενώ οι επιτραπέζιοι οθόνες είναι φαρδιές και κοντές. Αυτό σημαίνει ότι η μονάδα πλάτους προβολής (vw) είναι μικρότερη σε φορητές συσκευές από ό, τι στην επιφάνεια εργασίας.

Χρήση Μαθηματικών για Responsive Web Design

Οι μαθηματικές συναρτήσεις που παρέχονται προσυσκευασμένες με CSS προσφέρουν έναν μοναδικό τρόπο δημιουργίας ιστοσελίδων με απόκριση με ευκολία. Απλά πρέπει να τα ρυθμίσετε σωστά για να ξεκινήσετε.

Φυσικά, υπάρχουν άλλες μέθοδοι και λειτουργίες CSS που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε έναν ιστότοπο που να φαίνεται υπέροχος σε όλες τις πλατφόρμες.

Πώς να δημιουργήσετε μια αποκριτική γραμμή πλοήγησης χρησιμοποιώντας HTML και CSS

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα