Οδηγός μονάδας CSS: CSS em, rem, vh, vw και άλλα, εξηγείται

Μονάδες

Πολλές ιδιότητες CSS αρέσει width, margin, padding, font-sizeκλπ λάβει μήκος. Το CSS έχει έναν τρόπο να εκφράζει το μήκος σε πολλές μονάδες. Το μήκος είναι ένας συνδυασμός αριθμού και μονάδας χωρίς κενό διάστημα. Π.χ. 5px, 0.9emκ.λπ.

Μήκος

Μονάδες κοινού μήκους

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

  • rem - "r" σημαίνει "root": "root em" -, το οποίο είναι ίσο με το μέγεθος της γραμματοσειράς που είναι σταθερό στο στοιχείο ρίζας (σχεδόν πάντα).
  • vh και vw - Πολλές τεχνικές σχεδιασμού ιστοσελίδων ανταποκρίνονται σε μεγάλο βαθμό στους κανόνες ποσοστού. Ωστόσο, τα ποσοστά μέτρησης CSS δεν είναι πάντα η καλύτερη λύση για όλα τα προβλήματα. Το μέτρο vh είναι ίσο με το 1/100 του ύψους της θύρας προβολής. Έτσι, για παράδειγμα, εάν το ύψος του προγράμματος περιήγησης είναι 800px, το 1vh ισούται με 8px και, ομοίως, εάν το πλάτος της θύρας προβολής είναι 650px, το 1vw ισοδυναμεί με 6,5px.
  • vmin και vmax - Αυτές οι μονάδες σχετίζονται με τη μέγιστη ή ελάχιστη τιμή των vh και vw . Για παράδειγμα, εάν το πρόγραμμα περιήγησης έχει οριστεί σε 1200px πλάτος και το ύψος 600px, το 1vmin θα ήταν 6px και το 1vmax θα ήταν 12px. Ωστόσο, εάν το πλάτος είχε οριστεί στα 700 εικονοστοιχεία και το ύψος που ορίστηκε στα 1080 εικονοστοιχεία, το vmin θα ήταν ίσο με 7 εικονοστοιχεία και το vmax 10,8 pixel.
  • ex και ch - Αυτές οι μονάδες, παρόμοιες με τις em και rem , βασίζονται στην τρέχουσα γραμματοσειρά και το μέγεθος της γραμματοσειράς. Ωστόσο, σε αντίθεση με τα em και rem , αυτές οι μονάδες βασίζονται επίσηςfont-familyκαθώς καθορίζονται με βάση συγκεκριμένα μέτρα για κάθε γραμματοσειρά. Ημονάδα ch ("μονάδα χαρακτήρων") ορίζεται ως το πλάτος του χαρακτήρα μηδέν ("0"). Η ex μονάδα ορίζεται ως «το τρέχον ύψος x της τρέχουσας γραμματοσειράς ή το μισό του 1em». Το ύψος-x μιας δεδομένης γραμματοσειράς είναι το ύψος του πεζού «x» αυτής της γραμματοσειράς. Είναι συχνά το μεσαίο σημάδι της γραμματοσειράς.

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

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

Οι σχετικές μονάδες αλλάζουν σε σχέση με το τρέχον μέγεθος γραμματοσειράς του στοιχείου ή άλλες ρυθμίσεις. Ορισμένες σχετικές μονάδες είναι

em

  • το πλάτος ενός κεφαλαίου γράμματος M του font-sizeτρέχοντος στοιχείου.
  • Τα μεγέθη γραμματοσειράς κληρονομούνται από γονικά στοιχεία.

Παράδειγμα:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Εδώ

θα ισούται 32pxαπό το font-sizeτρέχον στοιχείο ή το γονικό στοιχείο είναι 16px.

rem

  • root em, ή το πλάτος ενός κεφαλαίου γράμματος M της προεπιλεγμένης βάσης font-size.
  • Τα μεγέθη των γονικών γραμματοσειρών δεν θα έχουν αποτέλεσμα

Παράδειγμα:

body { font-size: 16px; } p { font-size: 1.5rem; }

Εδώ

θα ισούται 24pxδεδομένου ότι η προεπιλεγμένη βάση font-sizeείναι 16px.

%

  • το ποσοστό τοις εκατό σε σχέση με το μέγεθος του γονέα.

Παράδειγμα:

div { width: 400px; } div p { width: 75%; }

Δεδομένου ότι το πλάτος του γονέα είναι 400px, το πλάτος του εσωτερικού παραγράφου θα είναι 300px, ή 75% 400px.

vw

  • πλάτος προβολής ή 1 / 100ο του πλάτους της θύρας προβολής

Παράδειγμα:

body { width: 100vw; }

Το bodyγέμισμα του πλάτους της θύρας προβολής, είτε είναι 417 εικονοστοιχεία, 690 εικονοστοιχεία ή οποιοδήποτε πλάτος.

vh

  • ύψος προβολής ή 1 / 100ο του ύψους της θύρας προβολής

Παράδειγμα:

div { height: 50vh; }

Αυτό divθα γεμίσει το μισό ύψος της θύρας προβολής, είτε είναι 1080px, 1300px ή οποιοδήποτε ύψος.

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

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

px

  • εικονοκύτταρο
  • Οι μετρήσεις pixel σχετίζονται με την ποιότητα της οθόνης της συσκευής προβολής

in, cm,mm

  • ίντσα, εκατοστό, χιλιοστόμετρο
  • Μια ίντσα είναι μια ίντσα σε μια μικρή οθόνη ή μια μεγάλη οθόνη

pt, pc

  • πόντοι (1/72 της ίντσας) και πίκας (12 πόντοι)

Παράδειγμα

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Μια παράγραφος με font-size: 24pxθα εμφανίζεται ως 24 εικονοστοιχεία σε οθόνη τηλεφώνου, tablet ή επιτραπέζιου υπολογιστή.

Η divθα εμφανίζονται ως 3 ίντσες πλάτος, και η borderεπί το divθα είναι 3/72 της ίντσας πάχους, ανεξάρτητα από το μέγεθος της οθόνης.