Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει... Οικιακές συσκευέςΤο CSS3 έχει νέες μονάδες μέτρησης. (Νομίζω ότι έχω ήδη μιλήσει για αυτό.

eng ) Έχετε ήδη ακούσει για τα px, pt, em και το νέο rem. Ας δούμε μερικά ακόμη: vw και vh.Συχνά υπάρχουν στοιχεία σε μια διάταξη που είναι εγγυημένα ότι ταιριάζουν στη θύρα προβολής του προγράμματος περιήγησης. ΣΕ

γενική περίπτωση

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

Τα ελαφριά κουτιά είναι ένας εξαιρετικός υποψήφιος για τη χρήση vw και vh, καθώς συνήθως τοποθετούνται σε σχέση με το παράθυρο προβολής, ωστόσο βρίσκω ότι το position:fixed με πάνω, κάτω, αριστερά και δεξιά τιμές είναι πιο εύκολο στη χρήση, καθώς δεν χρειάζεται να ορίσετε το ύψος και το πλάτος καθόλου.

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

Img (μέγιστο ύψος:95vh;)

ΣΕ σε αυτή την περίπτωσηΡύθμισα το ύψος στα 95vh για να αφήσω λίγο χώρο γύρω όταν είναι στην οθόνη.

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

Εάν το rem υποστηρίζεται από σχεδόν όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9, τότε η χρήση του vw και του vh αξίζει να σταματήσετε. Επί αυτή τη στιγμήμόνο τους υποστηρίζει Internet Explorer 9.

Η χρήση του χαρακτηριστικού μεγέθους γραμματοσειράς για την κλίμακα κειμένου είναι μια από τις πιο δύσκολες πτυχές του στυλ στο CSS. Το CSS προσφέρει τέσσερις μονάδες για τη μέτρηση του μεγέθους του κειμένου που εμφανίζεται σε ένα πρόγραμμα περιήγησης Ιστού. Ποια από αυτές τις τέσσερις μονάδες είναι πιο κατάλληλη για έγγραφα web; Το θέμα αυτό έχει προκαλέσει πολλές συζητήσεις και αντιπαραθέσεις. Είναι δύσκολο να δοθεί μια οριστική απάντηση σε μια τέτοια ερώτηση.

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

Εμ ( em): em είναι μια κλιμακούμενη μονάδα που χρησιμοποιείται για έγγραφα web. Ένα em ισούται με το τρέχον μέγεθος γραμματοσειράς. Για παράδειγμα, αν το μέγεθος γραμματοσειράς του εγγράφου είναι 12 pt, τότε 1em ισούται με 12 pt. Εφόσον το em είναι κλιμακωμένο, το 2em ισούται με 24pt, το 0,5em ισούται με 6pt, κ.λπ. Λόγω της επεκτασιμότητας και της υψηλής συμβατότητάς του με κινητές συσκευές, το em χρησιμοποιείται όλο και περισσότερο σε έγγραφα web.

εικονοστοιχεία ( px): Τα εικονοστοιχεία είναι μονάδες σταθερού μεγέθους που χρησιμοποιούνται για οτιδήποτε είναι αναγνώσιμο οθόνη υπολογιστή. Ένα pixel ισούται με μια κουκκίδα στην οθόνη ενός υπολογιστή (αυτή είναι η μικρότερη διαίρεση της ανάλυσης της οθόνης σας). Πολλοί σχεδιαστές ιστοσελίδων χρησιμοποιούν pixel σε έγγραφα Ιστού για να διασφαλίσουν ότι ο ιστότοπος εμφανίζεται τέλειος με pixel όταν εμφανίζεται σε ένα πρόγραμμα περιήγησης. Το μόνο πρόβλημα είναι ότι τα εικονοστοιχεία δεν μπορούν να μεγεθυνθούν για να φιλοξενήσουν αναγνώστες χαμηλής όρασης ή να μειωθούν για ευκολότερη ανάγνωση φορητές συσκευέςΩ.

Πόντοι ( pt): Οι τελείες χρησιμοποιούνται παραδοσιακά σε έντυπα μέσα (δηλαδή για οτιδήποτε εκτυπώνεται σε χαρτί). Ένα σημείο ισούται με 1/72 της ίντσας. Οι τελείες μοιάζουν πολύ με τα εικονοστοιχεία ως προς το ότι έχουν σταθερό μέγεθοςκαι δεν μπορούν να αυξηθούν/μειωθούν.

1. ποσοστό ( % ): Το ποσοστό είναι πολύ παρόμοιο με το em , εκτός από μερικές βασικές διαφορές. Πρώτον, το τρέχον μέγεθος γραμματοσειράς είναι 100% (δηλαδή 12pt = 100%). Η χρήση της μονάδας Ποσοστό σάς επιτρέπει να μεγεθύνετε/μειώσετε το κείμενό σας για ευκολότερη ανάγνωση.

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

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

Όπως μπορείτε να δείτε, το Ems και το Ποσοστό αυξάνονται καθώς αυξάνεται το μέγεθος της βασικής γραμματοσειράς, αλλά τα Pixel και τα Dots όχι. Είναι εύκολο να χρησιμοποιήσετε ένα απόλυτο μέγεθος για το κείμενό σας, αλλά είναι πολύ πιο εύκολο να χρησιμοποιήσετε επεκτάσιμο κείμενο που εμφανίζεται σε οποιαδήποτε συσκευή. Επομένως, είναι προτιμότερο να χρησιμοποιείτε μονάδες Em και Percent για το κείμενο ενός εγγράφου web.

EM ή ποσοστό;

Διαπιστώσαμε ότι το Point και το Pixel δεν είναι οι καλύτερες ενότητες για έγγραφα web. Άρα, μας μένουν το Em και το Percent. Θεωρητικά, το Em και το Ποσοστό είναι οι ίδιες μονάδες, αλλά στην πράξη υπάρχουν μικρές διαφορές μεταξύ τους που δεν μπορούν να αγνοηθούν.

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

Όταν το μέγεθος κειμένου στο πρόγραμμα περιήγησης πελάτη έχει οριστεί σε μεσαίο, δεν υπάρχει διαφορά μεταξύ Em και Ποσοστό. Αλλά αν αλλάξετε αυτήν τη ρύθμιση, η διαφορά θα γίνει αρκετά αισθητή. Με τη μικρότερη ρύθμιση, τα Ems είναι πολύ μικρότερα από τα ποσοστά. Και με τη ρύθμιση "Largest", ισχύει το αντίθετο - το Em είναι πολύ μεγαλύτερο από το Ποσοστό. Θα μπορούσατε να πείτε ότι οι μονάδες Em είναι κλιμακωμένες όπως θα έπρεπε, αλλά στην πράξη τέτοιο κείμενο κλιμακώνεται πολύ έντονα και σε ορισμένες συσκευές το μικρότερο κείμενο γίνεται δυσανάγνωστο.

Σύναψη

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

Νικητής: ποσοστό (%).

Συνήθως όταν δημιουργώ νέο σχέδιοΣτη συνέχεια, για το στοιχείο σώματος χρησιμοποιώ ποσοστά (σώμα (μέγεθος γραμματοσειράς: 62,5%; )) και στη συνέχεια χρησιμοποιώ το em για περαιτέρω κλίμακα. Εφόσον το σώμα έχει οριστεί σε Ποσοστό, μπορείτε να χρησιμοποιήσετε είτε το Ποσοστό είτε το Em για οποιουσδήποτε άλλους κανόνες και Επιλογείς CSSενώ εξακολουθείτε να εκμεταλλεύεστε τα πλεονεκτήματα της χρήσης του Ποσοστό ως κύριου μεγέθους γραμματοσειράς σας.

Τα τελευταία χρόνια, αυτή η πρακτική έχει γίνει πολύ διαδεδομένη στον σχεδιασμό ιστοσελίδων.
Τα εικονοστοιχεία χρησιμοποιούνται πλέον ως έγκυρες μονάδες μεγέθους γραμματοσειράς (οι χρήστες μπορούν να χρησιμοποιήσουν τη λειτουργία "ζουμ" του προγράμματος περιήγησης για να διαβάσουν μικρό κείμενο). Ωστόσο, η χρήση εικονοστοιχείων καθίσταται προβληματική λόγω φορητών συσκευών με οθόνες πολύ υψηλής πυκνότητας εικονοστοιχείων (μερικά συσκευές Androidκαι το iPhone έχουν πυκνότητα 200-300 pixel ανά ίντσα, γεγονός που καθιστά τις γραμματοσειρές 11 και 12 pixel δύσκολο να διαβαστούν). Έτσι, συνεχίζω να χρησιμοποιώ το Ποσοστό ως κύριο μέγεθος γραμματοσειράς για έγγραφα web.

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

Απόλυτες μονάδες

Οι απόλυτες μονάδες μέτρησης περιλαμβάνουν εκατοστά (cm), χιλιοστά (mm) και ίντσες (in). Παρόλο που έχουν σχεδιαστεί για να εμφανίζουν ομοιόμορφα στοιχεία σε μια ιστοσελίδα, το πρόγραμμα περιήγησης δεν μπορεί πάντα να υπολογίσει με ακρίβεια το φυσικό μέγεθος της οθόνης ή της οθόνης. διαφορετικές συσκευέςτα στοιχεία μπορεί να έχουν διαφορετικά μεγέθη.

One-cm ( μέγεθος γραμματοσειράς: 1cm; ) .one-mm (μέγεθος γραμματοσειράς: 1mm; ) .one-in (μέγεθος γραμματοσειράς: 1in; )

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

Τυπογραφικές μονάδες

Οι τυπογραφικές μονάδες μέτρησης περιλαμβάνουν σημεία (pt) και κορυφές (pc). Ένα σημείο (1pt) έχει σταθερό μέγεθος 1/72" ενώ ένα pica (1pc) είναι 1/6" (1pc = 12pt). Αυτές οι δύο μονάδες μέτρησης είναι πιο χρήσιμες σε στυλ γραμμένα για έντυπα έγγραφα παρά για χρήση σε οθόνες.

One-point ( μέγεθος γραμματοσειράς: 1pt; ) .one-pica (μέγεθος γραμματοσειράς: 1pc; )

Σχετικές μονάδες

Οι σχετικές μονάδες μέτρησης περιλαμβάνουν pixel (px) και ποσοστά (%). Το ποσοστό είναι μια μονάδα μέτρησης που δεν έχει καμία άμεση σχέση με το μέγεθος της γραμματοσειράς ενός στοιχείου ή το μέγεθος του ίδιου του στοιχείου. Η τιμή ενός συνόλου ιδιοτήτων ως ποσοστό εξαρτάται άμεσα από την τιμή του ίδιου συνόλου ιδιοτήτων για το γονικό στοιχείο. Για παράδειγμα, το μέγεθος γραμματοσειράς ορίζεται σε σχέση με το μέγεθος γραμματοσειράς του γονικού στοιχείου και το ύψος και το πλάτος εκφράζονται ως ποσοστό σε σχέση με το ύψος και το πλάτος της περιοχής περιεχομένου του γονικού στοιχείου.

One-pixel (μέγεθος γραμματοσειράς: 1px; ) .one-percent (μέγεθος γραμματοσειράς: 1%; )

Το Pixel είναι ένα σημείο ίσο με ένα φυσικό pixel στην οθόνη. Ωστόσο, τα προγράμματα περιήγησης δεν υπολογίζουν πάντα με ακρίβεια το μέγεθος της θύρας προβολής σε pixel.

Ας αναλογιστούμε τελευταία μοντέλαφορητούς υπολογιστές, tablet και smartphone εξοπλισμένα με οθόνες με υψηλή ανάλυση. Σε τέτοιες συσκευές, το πρόγραμμα περιήγησης δεν συσχετίζει τη μονάδα px με την ποσότητα φυσικά εικονοστοιχείαστην οθόνη. Αντίθετα, κανονικοποιεί τη μονάδα px για να φέρει την εμπειρία θέασης πιο κοντά σε αυτήν μιας παραδοσιακής επιτραπέζιας οθόνης, με πυκνότητες pixel που κυμαίνονται από 96 έως 120 pixel/ίντσα. Ως αποτέλεσμα, ένα τετράγωνο με πλευρά 10 εικονοστοιχείων μπορεί να σχεδιαστεί από το πρόγραμμα περιήγησης σε ένα smartphone, έτσι ώστε να υπάρχουν από 15 έως 20 φυσικά εικονοστοιχεία σε κάθε πλευρά. Αυτό σημαίνει ότι το px συμβαίνει επίσης να είναι μια σχετική μονάδα μέτρησης.

Σχετικές μονάδες που εξαρτώνται από τη γραμματοσειρά

Δύο επιπλέον σχετικές μονάδες μέτρησης είναι η em και η ex. Em είναι το ύψος της τρέχουσας γραμματοσειράς, ex είναι το ύψος του πεζού χαρακτήρα "x" στην καθορισμένη γραμματοσειρά.

One-ex ( μέγεθος γραμματοσειράς: 1ex; ) .one-em (μέγεθος γραμματοσειράς: 1em; )

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

Το CSS3 εισάγει δύο επιπλέον μονάδες μέτρησης: rem και ch. Rem - μέγεθος γραμματοσειράς του ριζικού στοιχείου ( ), μπορεί να χρησιμοποιηθεί αντί για em για να αποτρέψει τα μεγέθη γονικών ή προγονικών γραμματοσειρών να επηρεάσουν το μέγεθος γραμματοσειράς του τρέχοντος στοιχείου.

One-rem (μέγεθος γραμματοσειράς: 1rem; )

Η μονάδα ch ισούται με το πλάτος του μηδενικού (0) χαρακτήρα στη γραμματοσειρά του στοιχείου. Η χρήση του μπορεί να είναι χρήσιμη για τον προσδιορισμό του πλάτους ενός πεδίου που περιέχει κείμενο, επειδή το 1ch αντιστοιχεί περίπου σε έναν χαρακτήρα.

Η μονάδα ch υποστηρίζεται μόνο σε Chrome 27+, Firefox 19+ και IE9. Το Rem υποστηρίζεται σε Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ και Opera 11.6+.

Μονάδες θυρών προβολής

Οι μονάδες θυρών προβολής περιλαμβάνουν το vw (πλάτος) και το vh (ύψος), οι οποίες σας επιτρέπουν να κλιμακώνετε στοιχεία σε σχέση με το παράθυρο προβολής, το οποίο είναι το ορατό τμήμα της ιστοσελίδας.

Πλάτος: 50vw; /* 50% του πλάτους της θύρας προβολής */ ύψος: 25vh; /* 25% του ύψους της θύρας προβολής */

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

Πλάτος: 1vmin; /* 1vh ή 1vw, όποιο είναι μικρότερο */ ύψος: 1vmax; /* 1vh ή 1vw, όποιο είναι μεγαλύτερο */

Οι σχετικές μονάδες θυρών προβολής υποστηρίζονται σε Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ και Opera 15+.

Μοναδιαίες τιμές

Οι τιμές δεν χρειάζεται να προσδιορίζονται ως ακέραιοι αριθμοί. Ορισμένες ιδιότητες σάς επιτρέπουν επίσης να καθορίσετε αρνητικές τιμές ως τιμές.

P ( μέγεθος γραμματοσειράς: 0,394 in; ) /* δεκαδικό */ p ( περιθώριο: -1 px; ) /* αρνητική τιμή */

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

P ( μέγεθος γραμματοσειράς: 1ex; ) /* σωστό */ p ( μέγεθος γραμματοσειράς: 0; ) /* σωστό */ p ( μέγεθος γραμματοσειράς: 0ex; ) /* σωστό */ p ( μέγεθος γραμματοσειράς: 1 ex ; ) /* λάθος */ p (μέγεθος γραμματοσειράς: 1; ) /* λάθος */

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

Υπάρχουν πολλές βασικές μονάδες μέτρησης στο CSS: σχετικές και απόλυτες. Όταν εργάζεστε με CSS, θα πρέπει να κατανοείτε με ακρίβεια τη χρήση τους, διαφορετικά εργάζεστε με διαδοχικά τραπέζιατα στυλ θα είναι πολύπλοκα και ακατανόητα. Οι απόλυτες μονάδες μέτρησης χωρίζονται σε 5 τύπους, οι σχετικές σε 4. Θα πρέπει να γνωρίζετε ότι οι απόλυτες μονάδες μέτρησης δεν εξαρτώνται από τη συσκευή εξόδου, δηλ. οθόνες και οθόνες, ενώ οι σχετικές καθορίζουν το μέγεθος ενός στοιχείου σε σχέση με άλλο μέγεθος, δηλ. οθόνη, οθόνη, γονικό στοιχείο κ.λπ. Τώρα περισσότερα για αυτά.

Σχετικές μονάδες μέτρησης.

Οι σχετικές μονάδες μέτρησης χρησιμοποιούνται συνήθως για εργασία με κείμενο και σε «επεκτάσιμες» διατάξεις. Ο παρακάτω πίνακας δείχνει τις βασικές σχετικές μονάδες μέτρησης.

Η Ε.Μ.

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

ΠΡΩΗΝ

Αυτό το όρισμα ορίζεται ως το ύψος του πεζού χαρακτήρα "x". Το Ex δεσμεύεται στο προεπιλεγμένο μέγεθος γραμματοσειράς στο πρόγραμμα περιήγησης, εάν το γονικό στοιχείο έχει το σύνολο χαρακτηριστικών "font-size", τότε δεσμεύεται σε αυτό.

PX

Ένα pixel είναι 1 σημείο ανάλυσης μιας συσκευής εξόδου (οθόνης ή οθόνης). Εκείνοι. Εάν η ανάλυση της οθόνης σας είναι 1024*768, τότε έχετε 1024 pixel οριζόντια και 768 pixel κάθετα. Εκείνοι. Το μέγεθος pixel εξαρτάται άμεσα από την ανάλυση της συσκευής εξόδου και τα τεχνικά χαρακτηριστικά της.

%

Η ποσοστιαία μονάδα μέτρησης εξαρτάται από τις διαστάσεις του γονικού στοιχείου.

Απόλυτες μονάδες μέτρησης.

Οι απόλυτες μονάδες μέτρησης χρησιμοποιούνται λιγότερο συχνά και κυρίως κατά την εργασία με κείμενο. ΣΕ επόμενο τραπέζιΔίνονται απόλυτες μονάδες μέτρησης.

Από αυτές τις μονάδες, μόνο το pt (σημείο) πρέπει να περιγράφεται, γιατί Το pc είναι παράγωγο του pt και η χρήση των in, cm και mm δεν χρειάζεται να περιγραφεί.

Το σημείο είναι η πιο κοινή και ευρέως χρησιμοποιούμενη μονάδα μέτρησης για γραμματοσειρές (θυμάστε πώς ορίζουν το μέγεθος της γραμματοσειράς στο Word ή στο Open Office;).

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

Σχετικές μονάδες

Οι σχετικές μονάδες χρησιμοποιούνται συνήθως για την εργασία με κείμενο. Στον πίνακα 1 παραθέτει τις κύριες σχετικές μονάδες.

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

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

Η μονάδα ch είναι ίση με το πλάτος του χαρακτήρα "0" για το τρέχον στοιχείο και, όπως και em, εξαρτάται από το μέγεθος της γραμματοσειράς.

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

Υπάρχει επίσης μια ομάδα σχετικών μονάδων που συνδέονται με το μέγεθος της θύρας προβολής του προγράμματος περιήγησης. Στον πίνακα 2 δείχνει μια λίστα με μια περιγραφή.

Απόλυτες μονάδες

Απόλυτες μονάδες είναι φυσικές διαστάσεις- ίντσες, εκατοστά, χιλιοστά, σημεία, picas και pixel. Για συσκευές με χαμηλά dpi (ο αριθμός των εικονοστοιχείων ανά ίντσα καθορίζει την πυκνότητα των εικονοστοιχείων), η σύνδεση είναι ανά εικονοστοιχείο. Σε αυτήν την περίπτωση, μια ίντσα ισούται με 96 pixel. Προφανώς, η πραγματική ίντσα δεν θα ταιριάζει με την ίντσα σε μια τέτοια συσκευή. Σε συσκευές με υψηλό dpiη πραγματική ίντσα είναι ίδια με την ίντσα στην οθόνη, επομένως το μέγεθος των εικονοστοιχείων υπολογίζεται ως 1/96 της ίντσας. Στον πίνακα 3 παραθέτει τις βασικές απόλυτες μονάδες.

Παράδειγμα

Κεφαλίδα 30 εικονοστοιχείων

Μέγεθος κειμένου 1,5 εμ

Επικεφαλίδα 24 σημείων

Μετατόπιση κειμένου προς τα δεξιά κατά 30 χιλιοστά

Σημείωμα

Όταν ορίζετε διαστάσεις, φροντίστε να καθορίσετε τις μονάδες μέτρησης, για παράδειγμα πλάτος: 30 εικονοστοιχεία. Διαφορετικά, το πρόγραμμα περιήγησης δεν θα μπορεί να εμφανίσει το επιθυμητό αποτέλεσμα επειδή δεν καταλαβαίνει τι μέγεθος χρειάζεστε. Οι μονάδες δεν προστίθενται μόνο όταν η τιμή είναι μηδέν (περιθώριο: 0).

Ο Internet Explorer υποστηρίζει τη μονάδα vm αντί για vmin.

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση ) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Συμβουλευτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

×