Μονάδες Οδηγού CSS: Γρήγορη εκκίνηση. EM μονάδα μέτρησης ισχύος σε CSS

Το CSS3 πρόσθεσε νέες σχετικές μονάδες μέτρησης, όπως VH, VW, VMIN, VMAX. Αυτές οι μονάδες υπολογίζονται σε σχέση με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για Επιτραπέζιοι υπολογιστές Το πλάτος του παραθύρου του προγράμματος περιήγησης είναι μεγαλύτερο από το πλάτος της περιοχής προβολής (προστίθεται το πλάτος Scrollbar), οπότε αν ορίσετε το πλάτος 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
Χρώμιο. για αντρόιντ: 55.0

1. Μονάδες VH και VW

Δέντρα Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές Με βάση τη χρήση των τιμών ενδιαφέροντος. Αλλά το ενδιαφέρον απέχει πολύ από μια καλύτερη λύση για κάθε περίπτωση, καθώς υπολογίζονται σε σχέση με το μέγεθος του πλησιέστερου γονικού στοιχείου. Επομένως, εάν θέλετε να χρησιμοποιήσετε το ύψος και το πλάτος του παραθύρου του προγράμματος περιήγησης, είναι καλύτερο να χρησιμοποιήσετε μονάδες VH και VW. Για παράδειγμα, εάν το ύψος του παραθύρου του προγράμματος περιήγησης είναι 900px, τότε 1VH θα είναι 9px. Ομοίως, εάν το πλάτος του παραθύρου του προγράμματος περιήγησης είναι 1600px, τότε το 1VW θα είναι ίσο με 16px.

1.1. Προσαρμοσμένη εικόνα φόντου πλήρους οθόνης

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

Fullscreen-BG (image.jpg); Θέση φόντου: Κέντρο; Μέγεθος φόντου: κάλυψη; πλάτος: 100%; Ύψος: 100VH;) Σύκο. 2. Εμφανική εικόνα φόντου πλήρους οθόνης

1.2. Η επίδραση της ολίσθησης πλήρους σελίδας

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

HTML, σώμα (ύψος: 100%;) Τμήμα (Ύψος: 100%;)

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

Τμήμα (Ύψος: 100VH;)

Η επίδραση της αναρρίχησης των διαφανειών κατά το κλικ στο βέλος εφαρμόζεται χρησιμοποιώντας ένα μικρό σενάριο JQuery:

JQuery (έγγραφο). Scrollop () + $ (παράθυρο) .height ();) εάν ($ (αυτό) .Hasclass ("Top")) ("Top")) (VAR MOVEPOS \u003d $ (παράθυρο) .ScrollTOP () - $ (παράθυρο). ) $ ("Html, σώμα"). Animate ((Scrollop: Movepos), 600));));).

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

16 Ιουνίου 2011 στις 10:49

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

• CSS.

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

Οι μονάδες μήκους είναι δύο κατηγορίες: απόλυτοςκαι συγγενής. ΠΡΟΣ ΤΗΝ Απόλυτος σχετίζομαι:

• ίντσες (σε)
• santimeters (cm)
• millimeters (mm)
• Σημεία (PT)
• Κορυφές (PC)

Από την άποψη του CSS 1PT \u003d 1 / 72in προδιαγραφές και 1pc \u003d 12pt.
Στην ιδιότητα μεγέθους γραμματοσειράς, το έργο μιας αρνητικής αξίας σε μονάδες μήκους, για παράδειγμα -25cm, Απαράδεκτος.
Γιατί απόλυτη; Επειδή βρίσκονται στον φυσικό κόσμο μια πραγματική αξία, δηλαδή Πρότυπα.
Με αυτές τις μονάδες, η συσκευή εξόδου λειτουργεί, η οποία έχει ένα πραγματικό φυσικό μέγεθος, για παράδειγμα: κατά την εκτύπωση, θα χρησιμοποιήσουμε τέτοιες μονάδες.
Αλλά για οθόνες, αυτές οι μονάδες δεν έχουν νόημα, Υπάρχουν κάποιες προϋποθέσειςαλλά είναι έγκυρη μόνο Συμβατικότητα.
ΠΡΟΣ ΤΗΝ συγγενήςΟι μονάδες περιλαμβάνουν:

• em (σκάλα)
• x-Ύψος (πρώην)
• px (pixels)

Το ενδιαφέρον (%) είναι πάντα το μέγεθος της οποίας αξίζει να λέει ξεχωριστά. Είναι τόσο σημαντικό το γεγονός ότι το W3C το έκανε σε ξεχωριστή στήλη. Το IE% δεν μπορεί να γράψει από όλους τους κανόνες, αλλά για μερικούς και πότε γράφουμε% πρέπει να καταλάβουμε τι θεωρούνται.
Το Pixel είναι το μικρότερο σημείο που μπορεί να εγκατασταθεί στην οθόνη του υπολογιστή.
Γιατί pixel συγγενήςμέγεθος? Παίρνουμε φυσικός η οθόνη που έχει μια διαγώνιο είναι πραγματική φυσική ποσότητα. Αλλά μπορούμε να μας δώσουμε την άδεια σε αυτό Ο καθενας, σωστά? Ανάλογα με την άδεια που ορίζεται από εμάς, η τιμή pixel μπορεί να ποικίλει. Αυτός είναι ο λόγος για τον οποίο pixel - συγγενήςΑξία. Δηλαδή σε διαφορετικές οθόνες PX έχει διαφορετικό μέγεθος.
Η μονάδα EM αναφέρεται στο μέγεθος μιας τυπικής γραμματοσειράς που είναι εγκατεστημένο στις Παράμετροι του Global Browser.

Στον πίνακα ονομασίας μεμονωμένου σημαντικού μεγέθους γραμματοσειράς. Οι περισσότεροι από αυτούς δεν είναι χρήσιμοι για εμάς, αλλά κάποιοι πρέπει να γνωρίζουν.
Κάτω από τον αριθμό 4, η γραμμή βάσης των στοιχείων γραμματοσειράς υποδεικνύεται και κάτω από τον αριθμό 13 - μέγεθος γραμματοσειράς, em. Έτσι, το em είναι ένα μέγεθος γραμματοσειράς που καθορίζεται από το ύψος Κεφαλαίο γράμμα και το μέγεθος των απομακρυσμένων στοιχείων στην κορυφή και το κάτω μέρος (η διαδοχική πινακίδα μπορεί να εμφανιστεί στην κορυφή, για παράδειγμα: ΜΙ. ή Ι.).
Και τι είναι ex; Αυτό είναι το ύψος της πεζά. Κάτω από τον αριθμό 3 στον πίνακα και γράφτηκε. Για διαφορετικές γραμματοσειρές, ο λόγος αυτός έχει διαφορετικό ποσό. Αλλά δεν υποστηρίζουν όλα τα προγράμματα περιήγησης μια τέτοια αναλογία.
Για παράδειγμα: Η Microsoft πρότεινε την ανάγνωση 1em \u003d 2ex για όλους τους τύπους γραμματοσειρών. Οφείλεται στο γεγονός ότι π.χ. Διαφορετικά προγράμματα περιήγησης μπορεί να είναι διαφορετικό, καλύτερα στο έργο του μη χρησιμοποιεις. Ορισμένα προγράμματα περιήγησης θεωρούν πραγματικά σωστά και μερικοί όπως δηλαδή το μισό του EM. Και στην πραγματικότητα, μπορεί να είναι 0,46, σε μικρές γραμματοσειρές, μια τέτοια μη συμμόρφωση είναι αδιαμφισβήτητη και θα υπάρξει σημαντική διαφορά γενικά.
Τώρα για χρήση σε PT, PC, σε ιστότοπους.
Αν δείξουμε το στοιχείο στην περιοχή στο PT, θα εξακολουθεί να λαμβάνεται από κάτι. Πώς λιώνει το πρόγραμμα περιήγησης αυτό το πρόβλημα;
Κατά την αυγή της ανάπτυξης Εξοπλισμός υπολογιστώνΟι διαστάσεις των οθονών ήταν μικρές σειρές. Και η Microsoft πρότεινε να πάρει 96px \u003d 1in για σιγουριά και θα έχουμε την ανάλυση των συσκευών μας.
1in \u003d 96px
Και η Apple είπε :) Ας επικεντρωθούμε στην εκτύπωση και να πάρετε:
1in \u003d 72PT
Ωστόσο, στην πράξη αποδείχθηκε τα εξής: τόσο μικρότερη είναι η άδεια, τόσο λιγότερο η ευκαιρία να τοποθετήσουν τις πληροφορίες εκεί.
Έτσι η Apple άλλαξε το μυαλό του και έκανε 1 ιντσών \u003d 96px, αλλά όλα ολοκληρώνεται ανοησίεςΔεδομένου ότι η πραγματική φυσική ανάλυση των συσκευών σας κυμαίνεται από περίπου 60 έως 600px / in.
Αλλά η αξία του 96 προσδιορίζει να επανυπολογίσει. Αυτό σημαίνει ότι αν γράψετε ένα μέγεθος 10pt, το πρόγραμμα περιήγησης θα κάνει τα εξής: 96/72 * 10. Αυτή είναι η ιστορία κατά την επανεμφάνιση PT στο PX.
Στην πράξη, εγώ. Δεν συμβουλεύω σχετικά με τη χρήση οθονών Απόλυτος μονάδες. Στις οθόνες δεν έχει σημασία, αλλά είναι επιθυμητό όταν εκτυπώνεται, απλά ότι τα χρησιμοποιούν. Κατά την εκτύπωση, πρέπει να προσέχετε ότι όλα εμφανίζονται σε PT.

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

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

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

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

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

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

Οι τυπογραφικές μονάδες μέτρησης περιλαμβάνουν σημεία (PT) και κορυφές (PC). Το σημείο (1PT) έχει σταθερό μέγεθος 1/72 ίντσες, ενώ η κορυφή (1pc) είναι 1/6 ίντσες (1pc \u003d 12pt). Αυτές οι δύο μονάδες μέτρησης είναι πιο χρήσιμες σε στυλ γραμμένα για τυπωμένες εκδόσεις εγγράφων και όχι για χρήση σε οθόνες.

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

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

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

Ένα pixel (μέγεθος γραμματοσειράς: 1px;). Μία το ποσοστό (μέγεθος γραμματοσειράς: 1%;)

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

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

Γραμματοσειρές που εξαρτώνται από τη γραμματοσειρά

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

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

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

Στο CSS3 εισήχθη δύο πρόσθετες μονάδες μέτρησης: REM και CH. Rem - μέγεθος γραμματοσειράς ρίζας ( ), Μπορεί να χρησιμοποιηθεί αντί να εμποδίσει την επίδραση του μεγέθους γραμματοσειράς του γονέα ή των προγόνων του γονέα ή του μεγέθους γραμματοσειράς του τρέχοντος στοιχείου.

Ένα 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.394in;) / * Δεκαδικό κλάσμα * / P (Περιθώριο: -1px;) / * Αρνητική τιμή * /

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

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

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

Στο CSS3 εμφανίστηκαν νέες μονάδες μέτρησης. (Φαίνεται να έχω ήδη μιλήσει γι 'αυτό. eng) Έχετε ήδη ακούσει για PX, PT, EM και NEW REM. Ας σκεφτούμε λίγο περισσότερο: VW και VH.

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

Χρησιμοποιώντας το VW / VH, μπορούμε να ορίσουμε το μέγεθος των στοιχείων σε σχέση με το μέγεθος της VIAPORT. Οι μονάδες VW / VH είναι ενδιαφέρουσες για το ότι 1VW είναι μια μονάδα ίση με το πλάτος 1/100 "για να αντιστοιχίσετε ένα στοιχείο πλάτους ίσο με το πλάτος του πλάτους, για παράδειγμα, πρέπει να εγκαταστήσετε το πλάτος: 100VW.

Πώς μπορεί να χρησιμοποιηθεί

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

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

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

Σε αυτή την περίπτωση, έβαλα το ύψος των 95VH για να αφήσετε λίγο χώρο όταν βρίσκονται στην οθόνη.

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

Εάν το REM υποστηρίζεται από σχεδόν όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9, στη συνέχεια χρησιμοποιώντας το VW και το VH να περιμένει. Τη στιγμή που υποστηρίζονται μόνο Internet Explorer. 9.

Χαιρετισμοί, αγαπητοί αναγνώστες blog webcodius! Για να ορίσετε το μέγεθος των διαφόρων στοιχείων html σελίδεςΣτο CSS υπάρχουν μονάδες μέτρησης. Επιπλέον, μπορούν να χρησιμοποιηθούν και οι δύο σχετικές και απόλυτες μονάδες.

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

Οι απόλυτες μονάδες χρησιμοποιούνται λιγότερο από τη σχετική και ισχύουν κυρίως για τον καθορισμό του μεγέθους του κειμένου. Και για να υποδείξει το μέγεθος του κειμένου, χρησιμοποιείται κυρίως (PT), το οποίο λαμβάνεται διαιρώντας μία ίντσες με 72 μέρη. Η ίντσα, με τη σειρά του, είναι περίπου 25,4 χιλιοστά, αντίστοιχα, μία παράγραφος είναι περίπου ίση με το ένα τρίτο ενός χιλιοστού. Ένα παράδειγμα χρήσης απόλυτων μονάδων μέτρησης:

Μέγεθος 12 χιλιοστά

Μέγεθος 1 εκατοστό

Μέγεθος 1 ιντσών

Μέγεθος 24 πόντους

Μέγεθος επιλογής 1

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

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

1 PX στο CSSΌπως έχουμε ήδη μιλήσει παραπάνω, είναι ένα σημείο στην οθόνη χρήστη, η φυσική τιμή εξαρτάται από την ανάλυση της συσκευής και από πόσο καιρό το άτομο κοιτάζει την επιφάνεια του.
Κατά τον καθορισμό ποσοστού, το μέγεθος υπολογίζεται ανάλογα με το μέγεθος του γονικού στοιχείου. Έτσι, για παράδειγμα, αν το πλάτος του γονικού στοιχείου είναι 500px, στη συνέχεια, κατά τον καθορισμό πλάτους: το πλάτος του στοιχείου 50% θα είναι 250px.

em. Δεμένα με το μέγεθος της γραμματοσειράς που καθορίζεται στο προεπιλεγμένο πρόγραμμα περιήγησης ή στο μέγεθος της γραμματοσειράς του γονικού στοιχείου. ΑΛΛΑ ΠΡΩΗΝ. Αυτό είναι το ύψος της πρωτεύουσας (μικρό) γράμμα "x" (x) στη λατινική διάταξη. Δηλαδή, το EM συνδέεται επίσης με το μέγεθος γραμματοσειράς που ορίζεται στο προεπιλεγμένο πρόγραμμα περιήγησης ή το μέγεθος γραμματοσειράς του γονικού στοιχείου. Παραδείγματα:

Μέγεθος 20 εικονοστοιχείων

Μέγεθος 150%

Μέγεθος 2 EM.

Μέγεθος 2 πρώην.

Αποτέλεσμα:

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

Παραδείγματα χρήσης:

Μέγεθος 2 VW.

Μέγεθος 2 VH

Μέγεθος 2 Vmin.

Μέγεθος 2 Vmax

Λειτουργία Calc ()

Που χρησιμοποιείται για τον καθορισμό της υπολογιζόμενης τιμής cSS ιδιότητεςπου χρησιμοποιείται ως τιμή οποιουδήποτε αριθμού. Πρώτα απ 'όλα, το Calc μπορεί να χρησιμοποιηθεί για τον υπολογισμό του μεγέθους, του εγκλήματος, του χρόνου. Επιπλέον, η λειτουργία σας επιτρέπει να αναμίξετε διαφορετικές μονάδες μετρήσεων, όπως το πλάτος του Div-A μπορεί να οριστεί ως εξής:

div (
Πλάτος: Calc (100% - 40px).
}

Σε αυτή την περίπτωση, το πλάτος του Div - A θα είναι ίσο με το πλάτος του γονικού στοιχείου μείον 40 pixels.

Σε εκφράσεις, μπορείτε να χρησιμοποιήσετε την ακόλουθη αριθμητική δράση:

• + - Προσθήκη. Το σύμβολο διαχωρίζεται από κενά και στις δύο πλευρές (Ύψος: Calc (20% + 50px)).
• - - αφαίρεση. Το σύμβολο διαχωρίζεται από διαστήματα από δύο πλευρές (πλάτος: Calc (90% - 10px););
• * - πολλαπλασιασμός (padding: Calc (2em * 2););
• / - Τμήμα. Στο μηδενικό χάσμα απαγορεύεται (πλάτος: Calc (100% / 4)).

ΣΕ browsers Firefox. Πριν από την έκδοση 16.0, υποστηρίζεται η λειτουργία -Moz-Calc, στο Chrome στην έκδοση 26.0 και στο Safari από την έκδοση 6.0 υποστηρίζεται από -Webkit-Calc.

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