Μονάδες CSSExplained

38 of 38 rows

Μονάδα↕	Σε σχέση με↕	Πότε να τη χρησιμοποιήσετε↕	Παράδειγμα↕
Απόλυτες
⤢px	1/96 της ίντσας (το εικονοστοιχείο αναφοράς CSS).	Σταθερές διαστάσεις UI: περιγράμματα, λεπτές γραμμές, διαστάσεις εικονιδίων.	border: 1px solid #000;
⤢pt	1/72 της ίντσας (1pt = 1.333px).	Stylesheets εκτύπωσης, όπου τα μεγέθη αντιστοιχούν σε φυσικό χαρτί.	font-size: 12pt;
⤢cm	1 εκατοστό (≈37.8px).	Διατάξεις εκτύπωσης που απαιτούν πραγματικές μετρήσεις.	margin: 2cm;
⤢mm	1 χιλιοστό (≈3.78px).	Λεπτομερείς μετρήσεις εκτύπωσης.	padding: 5mm;
⤢in	1 ίντσα (96px = 2.54cm).	Διατάξεις εκτύπωσης με μετρήσεις σε ίντσες.	margin: 1in;
Σχετικές με τη γραμματοσειρά
⤢em	Το font-size του ίδιου του στοιχείου (κληρονομημένο από τον γονέα του).	Αποστάσεις που κλιμακώνονται μαζί με το περιβάλλον κείμενο.	padding: 1em;
⤢rem	Το font-size του βασικού στοιχείου (το στοιχείο html).	Μεγέθη γραμματοσειρών: σέβεται τη ρύθμιση του χρήστη για το βασικό μέγεθος γραμματοσειράς.	font-size: 1.25rem;
⤢ch	Το πλάτος του γλύφου '0' στην τρέχουσα γραμματοσειρά.	Ορισμός αναγνώσιμου μήκους γραμμής (χαρακτήρες ανά γραμμή).	max-width: 70ch;
⤢ex	Το ύψος x της τρέχουσας γραμματοσειράς (ύψος του πεζού 'x').	Κάθετες μετρήσεις δεμένες με τη γραμματοσειρά.	line-height: 2ex;
⤢cap	Το ύψος κεφαλαίων της τρέχουσας γραμματοσειράς (ύψος ενός κεφαλαίου γράμματος).	Κάθετες μετρήσεις σε κεφαλαία, πιο στενό από το ex.	padding-top: 0.5cap;
⤢ic	Το πλάτος του ιδεογράμματος '水' (νερό) στην τρέχουσα γραμματοσειρά.	Διαστασιολόγηση που ακολουθεί ένα χαρακτήρα CJK.	width: 4ic;
⤢lh	Η υπολογισμένη line-height του ίδιου του στοιχείου.	Διαστασιολόγηση στοιχείων σε ολόκληρες γραμμές κειμένου.	height: 3lh;
⤢rlh	Η line-height του βασικού στοιχείου.	Αποστάσεις σε πολλαπλάσια του βασικού ύψους γραμμής του εγγράφου.	margin-block: 2rlh;
Σχετικές με το viewport
⤢%	Η τιμή του γονέα για την ίδια ιδιότητα.	Ρευστές διατάξεις διαστασιολογημένες στο περιβάλλον στοιχείο.	width: 50%;
⤢vw	1% του πλάτους του viewport.	Ενότητες πλήρους κάλυψης διαστασιολογημένες στο πλάτος της οθόνης.	width: 100vw;
⤢vh	1% του ύψους του viewport.	Ενότητες hero ή επικαλύψεις που εκτείνονται σε όλο το ύψος της οθόνης.	height: 100vh;
⤢vmin	1% της μικρότερης διάστασης του viewport.	Διαστασιολόγηση στοιχείων ώστε να χωρούν στην οθόνη σε οποιονδήποτε προσανατολισμό.	font-size: 5vmin;
⤢vmax	1% της μεγαλύτερης διάστασης του viewport.	Γέμισμα του κυρίαρχου άξονα του viewport.	font-size: 5vmax;
⤢svh	1% του μικρού ύψους του viewport (διεπαφή προγράμματος περιήγησης πλήρως εμφανής).	Κινητές ενότητες πλήρους ύψους που χωρούν πάνω από την αναπτυγμένη διεπαφή του προγράμματος περιήγησης.	height: 100svh;
⤢lvh	1% του μεγάλου ύψους του viewport (διεπαφή προγράμματος περιήγησης κρυφή).	Φόντα που πρέπει να καλύπτουν την οθόνη ακόμη και όταν καταρρέει η διεπαφή του προγράμματος περιήγησης.	height: 100lvh;
⤢dvh	1% του δυναμικού ύψους του viewport, παρακολουθώντας τη διεπαφή του προγράμματος περιήγησης καθώς εμφανίζεται και κρύβεται.	Η κινητή διόρθωση για το 100vh: το ύψος αλλάζει καθώς εμφανίζεται η διεπαφή του προγράμματος περιήγησης.	height: 100dvh;
⤢svw	1% του μικρού πλάτους του viewport.	Το αντίστοιχο του svh σε πλάτος για τη στενότερη κατάσταση του viewport.	width: 100svw;
⤢lvw	1% του μεγάλου πλάτους του viewport.	Το αντίστοιχο του lvh σε πλάτος για την πλατύτερη κατάσταση του viewport.	width: 100lvw;
⤢dvw	1% του δυναμικού πλάτους του viewport, παρακολουθώντας τη διεπαφή του προγράμματος περιήγησης.	Το αντίστοιχο του dvh σε πλάτος όταν το viewport αλλάζει μέγεθος μαζί με τη διεπαφή.	width: 100dvw;
⤢vi	1% του μεγέθους του viewport κατά τον inline άξονα (πλάτος σε οριζόντιες κατευθύνσεις γραφής).	Διαστασιολόγηση viewport που ακολουθεί την κατεύθυνση γραφής.	width: 50vi;
⤢vb	1% του μεγέθους του viewport κατά τον άξονα block (ύψος σε οριζόντιες κατευθύνσεις γραφής).	Διαστασιολόγηση viewport που παραμένει σωστή σε κάθετες κατευθύνσεις γραφής.	height: 50vb;
Ρευστές
⤢clamp()	Μια προτιμώμενη τιμή περιορισμένη από ένα ελάχιστο και ένα μέγιστο.	Ρευστή τυπογραφία που ποτέ δεν υπερβαίνει ελάχιστο ή μέγιστο όριο.	width: clamp(320px, 80vw, 1100px);
⤢min()	Το μικρότερο από τα ορίσματα διαχωρισμένα με κόμμα.	Περιορισμός ενός μεγέθους ώστε να μην υπερβαίνει ποτέ ένα μέγιστο.	width: min(100%, 600px);
⤢max()	Το μεγαλύτερο από τα ορίσματα διαχωρισμένα με κόμμα.	Επιβολή ελάχιστου μεγέθους που μεγαλώνει με το viewport.	width: max(50%, 300px);
Γωνία
⤢deg	1/360 πλήρους κύκλου.	Transform περιστροφής και γωνιακές θέσεις διαβαθμίσεων.	transform: rotate(45deg);
⤢rad	Ακτίνια; 1rad ≈ 57.2958deg.	Γωνίες υπολογισμένες μαθηματικά, όπως παραγόμενα transform.	transform: rotate(1.5708rad);
⤢grad	Gradian; 400grad = πλήρης κύκλος.	Παλαιότερες ή γεωδαιτικές γωνιακές τιμές.	transform: rotate(100grad);
⤢turn	1turn = ένας πλήρης κύκλος 360°.	Πλήρεις ή μισές περιστροφές που διαβάζονται με μια ματιά.	transform: rotate(0.5turn);
Χρόνος
⤢s	Ένα δευτερόλεπτο.	Διάρκειες κινήσεων και μεταβάσεων.	transition: opacity 0.3s;
⤢ms	Ένα χιλιοστό του δευτερολέπτου (1s = 1000ms).	Σύντομες κινήσεις ανατροφοδότησης UI και καθυστερήσεις.	animation-duration: 150ms;
Ανάλυση
⤢dpi	Κουκκίδες ανά ίντσα της εξόδου.	Media queries ανάλυσης προσανατολισμένα στην εκτύπωση.	@media (min-resolution: 300dpi)
⤢dppx / x	Κουκκίδες ανά μονάδα px; το 1dppx ισοδυναμεί με τυπική οθόνη 96dpi.	Media queries για οθόνες retina και υψηλή DPI.	@media (min-resolution: 2x)
⤢dpcm	Κουκκίδες ανά εκατοστό (1dppx ≈ 2.54dpcm).	Media queries ανάλυσης σε μετρικές μονάδες.	@media (min-resolution: 118dpcm)