Ποιες μονάδες μέτρησης να επιλέξετε κατά τη διάταξη. Μονάδες μήκους σε CSS

Chercher Οικιακές συσκευέςΜια από τις πιο μπερδεμένες πτυχές CSSχαρακτηριστικό για κλιμάκωση κειμένου. Χρησιμοποιώντας το CSS, μπορείτε να αλλάξετε το μέγεθος του κειμένου στο πρόγραμμα περιήγησης χρησιμοποιώντας τέσσερις διαφορετικές μονάδες μέτρησης. Ποια από αυτές τις τέσσερις μονάδες είναι η καλύτερη για τον ιστό; Αυτό είναι ένα ερώτημα που έχει προκαλέσει ποικίλες συζητήσεις και επικρίσεις. Η εύρεση οριστικής απάντησης είναι δύσκολη γιατί η ίδια η ερώτηση είναι πολύπλοκη.

Γνωρίστε τις μονάδες

1. "Ems" (em): Το "em" είναι μια κλιμακούμενη μονάδα που χρησιμοποιείται σε έγγραφα web. Το "em" είναι ίσο με το τρέχον μέγεθος γραμματοσειράς, για παράδειγμα, εάν το μέγεθος γραμματοσειράς στο έγγραφο είναι 12pt, το 1em είναι ίσο με 12pt. Το "em" είναι κλιμακούμενο από τη φύση του, επομένως 2em θα ισούται με 24pt, 0,5em θα ισούται με 6pt, κ.λπ. Η χρήση του "em" γίνεται ολοένα και πιο δημοφιλής σε έγγραφα ιστού λόγω της επεκτασιμότητας και της ικανότητάς του να είναι χρήσιμη σε κινητές συσκευές.
2. Pixel (px): Τα "px" είναι μονάδες σταθερού μεγέθους που χρησιμοποιούνται σε οθόνες (όπως για ανάγνωση σε οθόνη υπολογιστή). Ένα pixel ισούται με μια κουκκίδα στην οθόνη του υπολογιστή σας (το μικρότερο στοιχείο της ανάλυσης της οθόνης σας). Πολλοί σχεδιαστές ιστοσελίδων χρησιμοποιούν px σε έγγραφα ιστού για να επιτύχουν μια τέλεια αναπαράσταση του ιστότοπού τους σε pixel όταν εμφανίζονται σε ένα πρόγραμμα περιήγησης. Ένα πρόβλημα με τη χρήση του px είναι ότι αυτές οι μονάδες δεν επιτρέπουν την κλιμάκωση για αναγνώστες με προβλήματα όρασης ή κινητές συσκευές.
3. Σημεία (pt): "pt", χρησιμοποιείται παραδοσιακά σε έντυπα μέσα (οτιδήποτε χρειάζεται να τυπωθεί σε χαρτί, κ.λπ.). Ένα "pt" ισούται με 1/72 της ίντσας. Το "pt", όπως το "px", έχει σταθερό μέγεθος μονάδας και δεν μπορεί να κλιμακωθεί.
4. Ποσοστά (%): Οι ποσοστιαίες μονάδες είναι παρόμοιες με το "em" εκτός από μερικές βασικές διαφορές. Πρώτον, το τρέχον μέγεθος γραμματοσειράς είναι 100% (δηλαδή 12pt = 100%). Χρησιμοποιώντας το "%", το κείμενό σας γίνεται πλήρως επεκτάσιμο για κινητές συσκευές και φιλικότητα προς τον χρήστη (προσβασιμότητα).

Ποια είναι λοιπόν η διαφορά;

Θα είναι εύκολο να κατανοήσετε τη διαφορά μεταξύ των μονάδων μεγέθους γραμματοσειράς μόλις τις δείτε σε δράση. Συνήθως, 1em = 12pt = 16px = 100%. Χρησιμοποιώντας αυτά τα μεγέθη γραμματοσειράς, ας δούμε τι συμβαίνει όταν αυξήσετε το μέγεθος της βασικής γραμματοσειράς (χρησιμοποιώντας τον επιλογέα σώματος CSS) από 100% σε 120%.

Αλλαγή μεγέθους γραμματοσειράς από 100% σε 120%.

Όπως μπορείτε να δείτε, τα "em" και "%" αύξησαν το μέγεθος της γραμματοσειράς, ενώ τα "px" και "pt" όχι. Ο ορισμός ενός απόλυτου μεγέθους για το κείμενό σας μπορεί να είναι εύκολος, αλλά είναι πολύ καλύτερο για τους επισκέπτες σας να χρησιμοποιούν επεκτάσιμο κείμενο που μπορεί να εμφανιστεί σε οποιαδήποτε συσκευή ή μηχάνημα. Για το λόγο αυτό, οι μονάδες "em" και "%" είναι προτιμότερο να χρησιμοποιηθούν για το κείμενο ενός εγγράφου web.

"em" εναντίον "%"

Ανακαλύψαμε ότι οι μονάδες "px" και "pt" δεν είναι οι καλύτερες για έγγραφα web, γεγονός που μας αναγκάζει να χρησιμοποιούμε "em" και "%". Θεωρητικά, οι μονάδες "em" και "%" είναι πανομοιότυπες, αλλά στην πράξη έχουν μικρές διαφορές που είναι σημαντικό να ληφθούν υπόψη.

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε ποσοστά (στην ετικέτα σώματος) ως βασική μονάδα μεγέθους γραμματοσειράς. Εάν αλλάξετε τη βασική μονάδα μεγέθους γραμματοσειράς από "%" σε "em" (δηλαδή σώμα (μέγεθος γραμματοσειράς: 1em;)), πρέπειμην παρατηρήσετε τη διαφορά. Ας δούμε τι συμβαίνει όταν το "1em" είναι η βασική μας μονάδα και όταν ο πελάτης αλλάζει το "Μέγεθος γραμματοσειράς" στις ρυθμίσεις του προγράμματος περιήγησής του (πολλά προγράμματα περιήγησης, όπως ο Internet Explorer, έχουν αυτήν την επιλογή).

Το μέγεθος γραμματοσειράς όταν ο πελάτης αλλάζει το μέγεθος κειμένου στο πρόγραμμα περιήγησης.

Όταν το μέγεθος του κειμένου έχει οριστεί σε "μεσαίο" στο πρόγραμμα περιήγησης πελάτη, δεν υπάρχει αξιοσημείωτη διαφορά μεταξύ "em" και "%". Ωστόσο, εάν αλλάξει η παράμετρος, η διαφορά γίνεται πολύ μεγάλη. Όταν οριστεί σε "Smallest", το "em" είναι πολύ μικρότερο από το "%" και όταν οριστεί σε "Largest", αντίθετα, το "em" εμφανίζεται πολύ μεγαλύτερο από το "%". Και ενώ πολλοί υποστηρίζουν ότι οι μονάδες σε κλίμακα "em" κλιμακώνονται όπως προβλέπεται, στην πράξη το κείμενο σε "em" κλιμακώνεται υπερβολικά δραματικά, με αποτέλεσμα το μικρότερο κείμενο να γίνεται δυσανάγνωστο σε ορισμένες μηχανές.

Ετυμηγορία

Θεωρητικά, οι μονάδες "em" είναι το νέο και επερχόμενο πρότυπο μεγέθους γραμματοσειράς στον ιστό, αλλά στην πράξη, οι μονάδες "%" επιτρέπουν την εμφάνιση κειμένου με μεγαλύτερη συνέπεια και ευκολία για τους χρήστες. Κατά την αλλαγή των παραμέτρων πελάτη, το κείμενο στο "%" άλλαξε σε λογικές αναλογίες, γεγονός που επιτρέπει στους σχεδιαστές να διατηρούν την αναγνωσιμότητα, την προσβασιμότητα και το σχεδιασμό.

Νικητής: τοις εκατό (%).

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

Καθώς το Διαδίκτυο μεγαλώνει, αυξάνεται και η ζήτηση για νέες λύσεις. Και επειδή εσείς και εγώ είμαστε σχεδιαστές ιστοσελίδων και προγραμματιστές front-end, δεν έχουμε άλλη επιλογή από το να μπορούμε να εργαστούμε με διάφορες επιλογές και να μπορούμε να λειτουργούμε καλά.

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

Σήμερα θα θέλαμε να σας πούμε για μερικά εργαλεία CSS. Κάθε ένα από αυτά τα εργαλεία είναι σαν μια μονάδα μέτρησης, όπως pixel ή ems, αλλά πιθανότατα δεν γνωρίζατε γι' αυτά.

Ας ξεκινήσουμε με κάτι που μοιάζει με κάτι που πιθανότατα είστε ήδη εξοικειωμένοι. Η μονάδα em ορίζεται ως το τρέχον μέγεθος γραμματοσειράς. Έτσι, εάν, για παράδειγμα, ορίσετε το μέγεθος γραμματοσειράς στο στοιχείο του σώματος, τότε η τιμή em οποιουδήποτε κατώτερου στοιχείου εντός του σώματος θα είναι ίση με αυτό το μέγεθος γραμματοσειράς.

σώμα (μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; ) div (μέγεθος γραμματοσειράς: 1,2 εκ. // υπολογισμένο σε 14 εικονοστοιχεία * 1,2 ή 16,8 εικονοστοιχεία)

Εδώ γράψαμε ότι το μέγεθος γραμματοσειράς του div θα είναι 1,2 em. Αυτό είναι 1,2 φορές μεγαλύτερο από το μέγεθος γραμματοσειράς από το οποίο κληρονόμησε, το οποίο ήταν 14 εικονοστοιχεία. Άρα το αποτέλεσμα είναι 16,8 px.

Ωστόσο, τι συμβαίνει εάν βάλετε σε καταρράκτη μεγέθη γραμματοσειρών που ορίζονται από το ένα στο άλλο; Στο επόμενο απόσπασμα εφαρμόζουμε το ίδιο CCS όπως παραπάνω. Κάθε div κληρονομεί το μέγεθος γραμματοσειράς από το μητρικό του, δίνοντάς μας σταδιακά μεγαλύτερα μεγέθη γραμματοσειράς.

Αν και αυτό μπορεί να είναι κατάλληλο σε ορισμένες περιπτώσεις, συχνά θέλουμε να βασιζόμαστε απλώς σε μια μεμονωμένη μέτρηση για τη μέτρηση. Σε αυτή την περίπτωση θα πρέπει να χρησιμοποιήσουμε rem. Το "r" in rem σημαίνει "ρίζα". είναι ίσο με το μέγεθος γραμματοσειράς που έχει οριστεί στο ριζικό στοιχείο. στις περισσότερες περιπτώσεις είναι ένα στοιχείο HTML.

Html (μέγεθος γραμματοσειράς: 14 px; ) div (μέγεθος γραμματοσειράς: 1,2 rem; )

Και στα τρία div από το προηγούμενο παράδειγμα, η γραμματοσειρά μπορεί να φτάσει τα 16,8 px.

5 βαθμοί, Πλέγμα

Το Rem είναι χρήσιμο για περισσότερα από τη βαθμονόμηση γραμματοσειρών. Για παράδειγμα, θα μπορούσαμε να βασίσουμε ένα ολόκληρο σύστημα πλέγματος ή βιβλιοθήκη διεπαφής χρήστη στη χρήση του μεγέθους γραμματοσειράς HTML του root rem και να χρησιμοποιήσουμε τον υπολογισμό τους σε συγκεκριμένα σημεία. Αυτό θα μας έδινε πιο προβλέψιμη βαθμονόμηση γραμματοσειράς και υπολογισμούς.

Δοχείο (πλάτος: 70 εκ. // 70 * 14 εικονοστοιχεία = 980 εικονοστοιχεία )

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

vh και vw

Οι αποκριτικές τεχνικές σχεδίασης ιστοσελίδων βασίζονται σε μεγάλο βαθμό στον κανόνα των ποσοστών. Ωστόσο, το ποσοστό CSS δεν είναι πάντα η καλύτερη λύση για κάθε πρόβλημα. Το πλάτος CSS είναι σε σχέση με το πλησιέστερο στοιχείο που περιέχει το γονικό στοιχείο. Τι γίνεται αν θέλουμε να χρησιμοποιήσουμε το πλάτος ή το ύψος της θύρας προβολής αντί για το πλάτος του αρχικού στοιχείου; Αυτό ακριβώς βοηθούν οι μονάδες vh και vw.

Το στοιχείο vh είναι το 1/100ο του ύψους της θύρας προβολής. Για παράδειγμα, εάν το ύψος του προγράμματος περιήγησης είναι 900 εικονοστοιχεία, το 1vh μπορεί να είναι έως και 9 εικονοστοιχεία. Επίσης, εάν το πλάτος της θύρας προβολής είναι 750 px, το 1vw μπορεί να φτάσει τα 7,5 px.

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

Διαφάνεια (ύψος: 100vh;)

Ας υποθέσουμε ότι θέλετε να δημιουργήσετε έναν τίτλο που να καλύπτει όλο το πλάτος της οθόνης. Για να γίνει αυτό πρέπει να ορίσετε το μέγεθος γραμματοσειράς σε vw. Αυτό το μέγεθος θα είναι συγκρίσιμο με το πλάτος του προγράμματος περιήγησης.

vmin και vmax

Ενώ τα vh και vm σχετίζονται πάντα με το ύψος και το πλάτος της θύρας προβολής, τα vmin και vmax σχετίζονται επίσης με το μέγιστο και το ελάχιστο αυτού του ύψους και του πλάτους, ανάλογα με το ποιο είναι μικρότερο και ποιο μεγαλύτερο. Για παράδειγμα, αν το πρόγραμμα περιήγησης έχει ρυθμίσεις πλάτους 1100 εικονοστοιχείων και ύψους 700 εικονοστοιχείων, το 1vmin θα είναι 7 εικονοστοιχεία και το 1vmax θα είναι 11 εικονοστοιχεία. Ωστόσο, εάν το πλάτος οριστεί σε 800px και το ύψος σε 1080px, τότε το vmin θα είναι 8px ενώ το vmax θα οριστεί σε 10,8px.

Σε ποιες περιπτώσεις μπορείτε να χρησιμοποιήσετε αυτές τις τιμές;

Φανταστείτε ότι θέλετε ένα στοιχείο που παραμένει ορατό στην οθόνη ανά πάσα στιγμή. Η χρήση ύψους και πλάτους που έχει οριστεί σε τιμή vmin κάτω από 100 θα σας επιτρέψει να το πετύχετε. Για παράδειγμα, ένα τετράγωνο στοιχείο που αγγίζει τουλάχιστον δύο μέρη της οθόνης θα μπορούσε να οριστεί ως εξής:

Κουτί (ύψος: 100vmin, πλάτος: 100vmin, )

Εάν θέλετε ένα τετράγωνο που θα καλύπτει ολόκληρη την ορατή περιοχή της θύρας προβολής, χρησιμοποιήστε τους ίδιους κανόνες, εκτός από το vmax.

Κουτί (ύψος: 100vmax; πλάτος: 100vmax;)

Ο συνδυασμός αυτών των κανόνων θα σας επιτρέψει να χρησιμοποιήσετε το μέγεθος της θύρας προβολής σας πολύ ευέλικτα και με μέγιστη παραγωγικότητα.

πρώην και κεφ

Οι μονάδες ex και ch, καθώς και em και rem, αναφέρονται στην τρέχουσα γραμματοσειρά και μέγεθος γραμματοσειράς. Ωστόσο, δεδομένου ότι βασίζονται σε μέτρα που αφορούν συγκεκριμένες γραμματοσειρές, το ex και το ch αντιστοιχίζονται επίσης στην οικογένεια γραμματοσειρών, σε αντίθεση με το em και το rem.

Η μονάδα ch, ή η μονάδα χαρακτήρων, ορίζεται ως ένα "βελτιωμένο μέτρο" του πλάτους του χαρακτήρα 0. Αυτή η έννοια έχει προκαλέσει πολλές συζητήσεις, αλλά η βασική ιδέα είναι ότι με δεδομένη μια γραμματοσειρά σταθερού πλάτους, ένα τετράγωνο με πλάτος N χαρακτήρες μονάδας όπως πλάτος: 40ch; μπορεί πάντα να περιέχει μια ακολουθία 40 χαρακτήρων στη συγκεκριμένη γραμματοσειρά. Ενώ η κοινή χρήση αυτού του συγκεκριμένου κανόνα είναι στη διάταξη της γραφής μπράιγ, το πεδίο δημιουργικότητας εδώ φυσικά εκτείνεται πέρα ​​από αυτές τις απλές δηλώσεις.

Η μονάδα ex ορίζεται ως "x-ύψος της τρέχουσας γραμματοσειράς Ή ένα δευτερόλεπτο του em". Thex-height μιας δεδομένης γραμματοσειράς είναι το x-height των πεζών γραμμάτων αυτής της γραμματοσειράς. Τις περισσότερες φορές, αυτό είναι γύρω από το μεσαίο σημάδι της γραμματοσειράς.

Υπάρχουν πολλές περιοχές όπου μπορούν να χρησιμοποιηθούν τέτοιες μονάδες. Τις περισσότερες φορές στο τυπογραφείο. Για παράδειγμα, το στοιχείο sup, το οποίο λειτουργεί ως εκθέτης, μπορεί να προστεθεί στη συμβολοσειρά χρησιμοποιώντας την κατάλληλη θέση και την τελική τιμή 1ex. Ομοίως, μπορείτε να επαναφέρετε το κάτω στοιχείο. Τα σφάλματα του προγράμματος περιήγησης διορθώνονται με κανόνες κάθετης ευθυγράμμισης που αφορούν τον εκθέτη και τον δείκτη, αλλά αν θέλετε περισσότερο έλεγχο, μπορείτε να δοκιμάσετε τα εξής:

Sup (θέση: σχετική; κάτω: 1ex; ) υπο (θέση: σχετική; κάτω: -1ex; )

Σύναψη

Είναι σημαντικό να παρακολουθείτε την ανάπτυξη και τη διάδοση του CSS, καθώς και να μαθαίνετε για νέα εργαλεία και να τα προσθέτετε στη λίστα δεξιοτήτων σας. Πιθανότατα, θα αντιμετωπίσετε προβλήματα που μπορούν να λυθούν με τη βοήθεια αυτών των μονάδων. Πάρτε το χρόνο σας και διαβάστε τις προδιαγραφές. Εγγραφείτε σε ενημερώσεις από το cssweekly. Και φυσικά, μην ξεχάσετε να εγγραφείτε σε εβδομαδιαίες ενημερώσεις και δωρεάν εκπαιδευτικά βίντεο στο Tuts+!

Μπορείτε να καθορίσετε μήκος σε CSS σε διαφορετικές μονάδες. Μερικά από αυτά προέρχονται από την τυπογραφική παράδοση, όπως το point (pt) και το pica (pc), άλλα, π.χ. εκατοστό (cm) και ίντσα (in) μας είναι γνωστά στην καθημερινή χρήση. Υπάρχει επίσης μια «μαγική» μονάδα που επινοήθηκε ειδικά για CSS: px. Αυτό σημαίνει ότι διαφορετικές ιδιότητες απαιτούν διαφορετικές μονάδες;

Όχι, οι μονάδες μέτρησης δεν σχετίζονται με ιδιότητες, αλλά σχετίζονται άμεσα με τα μέσα προβολής: οθόνη ή χαρτί.

Οποιεσδήποτε μονάδες μέτρησης μπορούν να χρησιμοποιηθούν οπουδήποτε. Μια ιδιότητα με τιμή σε εικονοστοιχεία (περιθώριο: 5 px) δέχεται επίσης τιμές σε ίντσες ή εκατοστά (περιθώριο: 1,2 ίντσες, περιθώριο: 0,5 cm) και αντίστροφα.

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

Η σχέση μεταξύ απόλυτων μονάδων είναι: 1in = 2,54cm = 25,4mm = 72pt = 6pc

Εάν έχετε πρόχειρο χάρακα, μπορείτε να ελέγξετε την ακρίβεια της συσκευής σας. Εδώ είναι ένα ορθογώνιο ύψους 1 ίντσας (2,54 cm):
72π
↓

Οι λεγόμενες απόλυτες μονάδες (cm, mm, in, pt και pc) στο CSS σημαίνουν το ίδιο πράγμα όπως παντού αλλού, αλλά μόνο εάν η συσκευή εξόδου έχει αρκετά υψηλή ανάλυση. Σε έναν εκτυπωτή λέιζερ, το 1 cm πρέπει να είναι ακριβώς ίσο με 1 εκατοστό.

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

Αυτό που βλέπετε στις οθόνες των υπολογιστών και στις κινητές συσκευές μπορεί να μην είναι αυτό που περιμένατε.

Στο παρελθόν, το CSS απαιτούσε να εμφανίζονται σωστά οι απόλυτες μονάδες ακόμη και σε οθόνες υπολογιστών. Επειδή όμως υπήρχαν περισσότερες λανθασμένες υλοποιήσεις παρά σωστές και δεν αναμένονταν βελτιώσεις, η CSS εγκατέλειψε αυτήν την απαίτηση το 2011.

Επί του παρόντος, οι απόλυτες μονάδες απαιτούνται μόνο για να λειτουργούν σωστά όταν εκτυπώνονται και σε συσκευές υψηλής ανάλυσης.

Το CSS δεν προσδιορίζει τι ακριβώς εννοείται με τον όρο "υψηλή ανάλυση". Αλλά επειδή οι φθηνοί εκτυπωτές σήμερα έχουν τουλάχιστον 300 dpi και οι καλές οθόνες έχουν περίπου 200 dpi, το περίγραμμα πιθανότατα βρίσκεται κάπου μεταξύ αυτών των τιμών. Ένας άλλος λόγος για να μην χρησιμοποιείτε απόλυτες μονάδες οπουδήποτε εκτός από την εκτύπωση: Εξετάζουμε διαφορετικές οθόνες από διαφορετικές αποστάσεις., Το 1 εκατοστό φαίνεται μικρό στην οθόνη ενός επιτραπέζιου υπολογιστή., Αλλά σε μια οθόνη κινητού, ακριβώς μπροστά στα μάτια σας, είναι πολλά. Είναι καλύτερα να χρησιμοποιείτε αντίστοιχες μονάδες, π.χ. em.Οι μονάδες em και ex εξαρτώνται από το μέγεθος της γραμματοσειράς και μπορεί να είναι διαφορετικές για κάθε στοιχείο του εγγράφου. Η μονάδα em είναι απλώς το μέγεθος της γραμματοσειράς. Σε ένα στοιχείο στο οποίο δίνεται γραμματοσειρά 2 in, 1em σημαίνει αυτά τα 2in. Ο καθορισμός διαστάσεων (π.χ. για padding) στο em σημαίνει ότι έχουν οριστεί σε σχέση με τη γραμματοσειρά και είτε η γραμματοσειρά του χρήστη είναι μεγάλη (π.χ. σε μεγάλη οθόνη) είτε μικρή (π.χ. σε φορητή συσκευή), αυτές οι διαστάσεις θα παραμείνουν ανάλογες . Δηλώσεις όπως η εσοχή κειμένου: 1,5em και το περιθώριο: 1em στο CSS είναι εξαιρετικά δημοφιλείς. Η μονάδα ex χρησιμοποιείται σπάνια. Εκφράζει τις διαστάσεις, οι οποίες πρέπει να μετρηθούν από το ύψος x της γραμματοσειράς.. Οι γραμματοσειρές με το ίδιο μέγεθος (και, κατά συνέπεια, το ίδιο em) μπορεί να έχουν τεράστια διαφορά στα μεγέθη των πεζών γραμμάτων, και αν είναι σημαντικό κάποια εικόνα, για παράδειγμα, να αντιστοιχεί στο x-height, η μονάδα ex βρίσκεται στη διάθεσή σας υπηρεσία.

Η μονάδα px στο CSS είναι μαγική. Δεν σχετίζεται με την τρέχουσα γραμματοσειρά, αλλά συνήθως δεν σχετίζεται με φυσικά εκατοστά ή ίντσες. Μια μονάδα px ορίζεται ως κάτι μικρό αλλά ορατό, δηλ. Μια οριζόντια γραμμή πάχους 1 εικονοστοιχείου θα μπορούσε να αποδοθεί με αιχμηρές άκρες (χωρίς anti-aliasing). Τι μετράει ως καθαρό, μικρό και ορατό εξαρτάται από τη συσκευή και τον τρόπο που τη χρησιμοποιείτε: το κρατάτε ακριβώς μπροστά στα μάτια σας, όπως ένα κινητό τηλέφωνο, στο μήκος του χεριού, σαν οθόνη ή κάπου ενδιάμεσα, όπως ηλεκτρονικός αναγνώστης;

Επομένως, το px εξ ορισμού δεν είναι ένα σταθερό μήκος, αλλά κάτι που εξαρτάται από τον τύπο της συσκευής και την κανονική χρήση της.

Για να καταλάβετε γιατί η μονάδα px είναι έτσι όπως είναι, φανταστείτε μια οθόνη CRT από τη δεκαετία του 1990: η μικρότερη κουκκίδα που μπορούσε να εμφανίσει ήταν περίπου 1/100 της ίντσας (0,25 mm) ή ελαφρώς μεγαλύτερη. Η μονάδα px παίρνει το όνομά της από αυτά τα εικονοστοιχεία οθόνης.

Οι τρέχουσες συσκευές μπορούν, καταρχήν, να εμφανίζουν μικρότερες, καθαρές κουκκίδες (αν και μπορεί να είναι δύσκολο να τις δούμε χωρίς μεγεθυντικό φακό).

Το CSS καθορίζει επίσης ότι οι εικόνες bitmap (π.χ. φωτογραφίες) αποδίδονται σε κλίμακα 1 pixel εικόνας επί 1 px από προεπιλογή. Μια φωτογραφία με ανάλυση 600 επί 400 θα έχει πλάτος 600 εικονοστοιχεία και ύψος 400 εικονοστοιχεία. Έτσι, τα pixel της φωτογραφίας δεν συνδέονται με τα pixel της συσκευής εξόδου (που μπορεί να είναι πολύ μικρά), αλλά με μονάδες px. Αυτό σας επιτρέπει να ευθυγραμμίσετε με ακρίβεια τις εικόνες με άλλα στοιχεία εγγράφου, αρκεί να χρησιμοποιείτε μονάδες px στα στυλ σας αντί για pt , cm , κ.λπ.

Λόγω της κοινής συνήθειας μεταξύ των προγραμματιστών να χρησιμοποιούν τιμές pixel, δεν πιστεύουμε ότι όλοι κατανοούν τον πραγματικό σκοπό των παραμέτρων em και πώς λειτουργούν στο CSS.

Κατά τη σύνταξη ορισμένων οδηγών, έπρεπε με κάποιο τρόπο να αντιμετωπίσουμε αυτές τις έννοιες, οπότε σήμερα έχουμε κάτι να σας πούμε. Ελπίζουμε ότι ο σημερινός μας οδηγός θα σας βοηθήσει να τραβήξετε την αυλαία μιας τόσο βολικής και στοχαστικής τεχνικής που έχει σχεδιαστεί για την ανάπτυξη διαδικτυακών έργων.

Ορισμός του em

Η προδιαγραφή εισάγει αρκετά την παράμετρο em:

Ίση με την υπολογισμένη τιμή μεγέθους γραμματοσειράς που εφαρμόζεται στο στοιχείο

Με άλλα λόγια, εάν έχουμε τον ακόλουθο κώδικα CSS:

Στοιχείο (
μέγεθος γραμματοσειράς: 20 px;
}
Αυτό σημαίνει ότι το σύνολο 1em σε αυτό το στοιχείο ή σε οποιοδήποτε από τα παιδιά του θα είναι ίσο με 20 pixel. .

Εάν χρησιμοποιείτε τον ακόλουθο κώδικα:

Στοιχείο (
μέγεθος γραμματοσειράς: 20 px;
πλάτος: 4em;
ύψος: 4em;
}
Αυτό σημαίνει ότι το πλάτος και το ύψος του στοιχείου (που ορίζονται εδώ ως 4em x 4em) θα είναι 80px x 80px (20px * 4 = 80px).

Ας ρίξουμε μια πιο προσεκτική ματιά

Το κλειδί για την απομνημόνευση είναι ο σκοπός του em και η προέλευση της παραμέτρου. Εξής:

Το Em είναι μια μονάδα αλλαγής τυπογραφίας ίση με το τρέχον καθορισμένο μέγεθος γραμματοσειράς. Το όνομα em σχετίζεται με το γράμμα M. Η μονάδα προήλθε αρχικά από το πλάτος του κεφαλαίου γράμματος M όταν χρησιμοποιήθηκε μια συγκεκριμένη γραμματοσειρά

Η τεκμηρίωση συνεχίζει εξηγώντας ότι παρόλο που το όνομα βασίστηκε αρχικά στο πλάτος του γράμματος M, αυτό δεν έχει πλέον σημασία. Δεδομένου ότι σήμερα η μονάδα μέτρησης em σχετίζεται με το μέγεθος του σημείου της γραμματοσειράς.

Χρησιμοποιώντας αυτήν τη μέθοδο υπολογισμού, δεν υπάρχει ακριβής ορισμός στο αρχείο CSS του τι είναι em. Το νόημα αυτής της ενότητας εξαρτάται από τον τρόπο κατασκευής των Φύλλων στυλ Cascading. Θεωρητικά, αν προσδιορίζατε το μήκος όλων των στοιχείων στη μονάδα em, τότε η αλλαγή του μεγέθους γραμματοσειράς από μόνη της θα ήταν αρκετή για να «καταστραφεί» όλη η σήμανση τέλεια για pixel.

Τι γίνεται αν δεν χρησιμοποιήσω την παράμετρο μεγέθους γραμματοσειράς;

Στο παραπάνω παράδειγμα και στο JSBin με το οποίο συνδεθήκαμε, η παράμετρος μεγέθους γραμματοσειράς καθορίζεται ακριβώς. Η μονάδα em προέρχεται στη συνέχεια από την παράμετρο "βάση". Τι γίνεται όμως αν το στοιχείο δεν έχει την ακριβή παράμετρο μεγέθους γραμματοσειράς;

Σε αυτήν την περίπτωση, δεδομένου ότι η παράμετρος μεγέθους γραμματοσειράς κληρονομείται σε όλο το δέντρο εγγράφου, η τιμή της μονάδας em θα προέρχεται από την παράμετρο που κληρονομήθηκε. Εάν δεν υπάρχει αναφορά στο μέγεθος γραμματοσειράς σε ολόκληρο το έγγραφο, τότε η τιμή μιας μεμονωμένης μονάδας em θα είναι 16 pixel, που είναι η προεπιλογή (και πιστεύουμε ότι αυτό δεν διαφέρει μεταξύ των προγραμμάτων περιήγησης).

Το "rem" θα πρέπει να είναι αυτόματο για τους ανθρώπους

Ήρθε η ώρα να φέρετε μια νέα προσθήκη στο CSS: . Αυτή η μονάδα (το όνομα προέρχεται από το "root em") υποστηρίζεται τέλεια σε όλα τα προγράμματα περιήγησης: IE9+, FF3.6+, Chrome, Safari 5+ και Opera 11.6+.

Συνολικά, αυτή η μονάδα είναι πολύ εύκολα κατανοητή. Σας δίνει τη δυνατότητα να κάνετε τιμές μονάδας em σε όλο ένα έγγραφο HTML με βάση μια "κύρια" τιμή που καθορίζεται στο " html"-στοιχείο. Με αυτόν τον τρόπο μπορείτε να ξεχάσετε την παράμετρο μεγέθους γραμματοσειράς, καθώς όλες οι μονάδες em που χρησιμοποιούνται στο έγγραφο θα βασίζονται στην κύρια τιμή rem, για παράδειγμα:

Html (μέγεθος γραμματοσειράς: 62,5%; )
σώμα ( μέγεθος γραμματοσειράς: 1,4 rem; ) /* =14 px */
h1 ( μέγεθος γραμματοσειράς: 2,4 rem; ) /* =24 px */
Και, όπως με em, αν δεν καθορίσετε μια τιμή μεγέθους γραμματοσειράς στο " html" στοιχείο, η μονάδα "root em" θα είναι 16 pixel από προεπιλογή.

Carpe di-em

Μπορείτε να βρείτε ένα σωρό άλλες εκφράσεις με αυτές :)

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

Παρόλο που μπορούμε να δημιουργήσουμε ένα ολόκληρο πρότυπο χρησιμοποιώντας μονάδες em, πιστεύουμε ότι είναι ακόμα καλύτερο να χρησιμοποιούμε τιμές pixel και ποσοστά σε αποκριτικά πρότυπα και, όπως σημειώθηκε, για τυπογραφία, να χρησιμοποιούμε ems.

Λοιπόν, ελπίζουμε να σας άρεσε το σεμινάριο μας σήμερα και να βάλετε ό,τι μάθατε να χρησιμοποιείτε.

Μην ξεχάσετε να σχολιάσετε!

Νέες σχετικές μονάδες έχουν προστεθεί στο CSS3 όπως vh , vw , vmin , vmax . Αυτές οι μονάδες υπολογίζονται σε σχέση με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για επιτραπέζιους υπολογιστές, το πλάτος του παραθύρου του προγράμματος περιήγησης είναι μεγαλύτερο από το πλάτος της θύρας προβολής (προστίθεται το πλάτος της γραμμής κύλισης), επομένως εάν ορίσετε το πλάτος ενός στοιχείου σε 100vw , θα επεκταθεί πέρα ​​από το html.

Ρύζι. 1. Εικόνα φόντου πλήρους οθόνης με πλάτος 100vw

Υποστήριξη προγράμματος περιήγησης

ΔΗΛ.: 9.0 εκτός από το vmax, χρησιμοποιήστε vm αντί για vmin
Ακρη: 12.0 εκτός από το vmax, χρησιμοποιήστε vm αντί για vmin
Firefox: 19.0
Χρώμιο: 26.0
Οπερα: 15.0
Σαφάρι: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome για Android: 55.0

1. Μονάδες vh και vw

Οι τεχνικές Responsive web design βασίζονται στη χρήση ποσοστών. Όμως τα ποσοστά δεν είναι η καλύτερη λύση για κάθε περίπτωση, αφού υπολογίζονται σε σχέση με το μέγεθος του πλησιέστερου μητρικού στοιχείου. Επομένως, εάν θέλετε να χρησιμοποιήσετε το ύψος και το πλάτος του παραθύρου του προγράμματος περιήγησης, είναι προτιμότερο να χρησιμοποιήσετε μονάδες vh και vw. Για παράδειγμα, εάν το ύψος του παραθύρου του προγράμματος περιήγησης είναι 900 px, τότε το 1vh θα είναι 9 px. Ομοίως, εάν το πλάτος του παραθύρου του προγράμματος περιήγησης είναι 1600 px, τότε το 1vw θα είναι 16 px.

1.1. Αποκριτική εικόνα φόντου πλήρους οθόνης

Δεδομένου ότι το πλάτος του στοιχείου που καθορίζεται με 100vw είναι μεγαλύτερο από το πλάτος της θύρας προβολής, για να δημιουργήσετε εικόνες φόντου πλήρους οθόνης, είναι προτιμότερο να χρησιμοποιήσετε ένα πλάτος 100%, το οποίο θα είναι ίσο με το πλάτος του ριζικού στοιχείου html.

Πλήρης οθόνη-bg ( φόντο: url(image.jpg); Θέση φόντου: κέντρο; μέγεθος φόντου: εξώφυλλο; πλάτος: 100%; ύψος: 100vh; ) Ρύζι. 2. Αποκριτική εικόνα φόντου πλήρους οθόνης

1.2. Εφέ διαφάνειας πλήρους σελίδας

Για να δημιουργήσετε ένα μπλοκ σε όλο το ύψος του παραθύρου του προγράμματος περιήγησης, πρέπει να ορίσετε ύψος: 100%; για τρία στοιχεία - html, σώμα και απευθείας για το ίδιο το μπλοκ:

Html, σώμα ( ύψος: 100%; ) τμήμα (ύψος: 100%; )

Δεδομένου ότι τα ποσοστά μεγέθη υπολογίζονται σε σχέση με τις τιμές των γονικών στοιχείων, πρέπει να ορίσετε τις κατάλληλες τιμές για κάθε στοιχείο DOM. Η μονάδα μέτρησης vh δεν απαιτεί αλυσιδωτές τιμές, καθώς η τιμή της υπολογίζεται απευθείας σε σχέση με το παράθυρο του προγράμματος περιήγησης:

Τμήμα (ύψος: 100vh; )

Το αποτέλεσμα της κύλισης στις διαφάνειες όταν κάνετε κλικ στο βέλος υλοποιείται χρησιμοποιώντας ένα μικρό σενάριο jQuery:

JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(παράθυρο ).scrollTop() + $(window).height( ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body").animate(( scrollTop: movePos), 600 ));

Το ύψος που καθορίζεται με το vh μπορεί επίσης να χρησιμοποιηθεί για να κεντράρει ένα στοιχείο στη σελίδα.