Μετατροπή pixel (px) σε rem
Με την προεπιλεγμένη βάση των 16 pixel, τα 24 px είναι 1,5 rem και τα 14 px είναι 0,875 rem. Ο υπολογισμός είναι μία διαίρεση: pixel διά το βασικό μέγεθος γραμματοσειράς. Γράψτε τη διάσταση από το σχέδιο στο πρώτο πεδίο και, αν η σελίδα σας έχει άλλη βάση, βάλτε τη στο Βασικό font-size.
Τι είναι το rem και γιατί οι διαστάσεις σε pixel γράφονται σε rem;
Τα αρχεία σχεδίασης δίνουν τις διαστάσεις σε pixel: τίτλος 28 pixel, απόσταση ανάμεσα σε δύο ενότητες 32 pixel. Το pixel του CSS είναι σταθερή μονάδα, που το πρότυπο την ορίζει ως το 1/96 της ίντσας[1]. Γι’ αυτό ο μετατροπέας px σε ίντσες μετρά 96 pixel σε μια ίντσα στην προεπιλεγμένη του ανάλυση. Το rem είναι σχετική μονάδα: ένα rem ισούται με το υπολογισμένο μέγεθος γραμματοσειράς του στοιχείου html, του ριζικού στοιχείου της σελίδας[1].
Επειδή το rem υπολογίζεται πάντα από το ριζικό στοιχείο, δεν πολλαπλασιάζεται σε ένθετα στοιχεία όπως το em, που το μετατρέπει ο μετατροπέας em σε px. Για να μετατρέψετε οποιαδήποτε διάσταση από pixel σε rem, αρκεί να ξέρετε το μέγεθος γραμματοσειράς του html. Μετά τη μετατροπή η διάσταση ακολουθεί τη ρύθμιση του αναγνώστη: ένας τίτλος 24 pixel μένει 24 pixel με την προεπιλογή και γίνεται 30 pixel για τον αναγνώστη που διάλεξε Μεγάλο στο Chrome ή Μεγάλο μέγεθος γραμματοσειράς στο Edge.
60px στον κανόνα .hero και 220px στον κανόνα που ενώνει τις κλάσεις .heading και .sub-heading. Με βάση 16 pixel το πρώτο γίνεται 3.75rem και το δεύτερο 13.75rem, και έπειτα μεγαλώνουν και τα δύο μαζί με τη ρύθμιση του αναγνώστη. Φωτογραφία: Ferenc Almasi, Unsplash.Πόσα rem είναι τα 24 px;
Τα 24 pixel ισούνται με 1,5 rem με την προεπιλεγμένη βάση των 16 pixel. Ο τύπος είναι μία διαίρεση: rem = pixel ÷ βασικό μέγεθος γραμματοσειράς. Κάθε 16 pixel κάνουν 1 rem και ένα pixel είναι 0,0625 rem. Έτσι τα 8 pixel είναι 0,5 rem. Τα 32 pixel είναι 2 rem.
Αν το φύλλο στυλ χρησιμοποιεί άλλη βάση, διαιρέστε με αυτήν. Με την τεχνική 62,5% η βάση γίνεται 10 pixel και τα 24 pixel ισούνται με 2,4 rem. Με βάση 20 pixel τα 24 pixel είναι 1,2 rem. Γράψτε τη βάση στο τρίτο πεδίο και ο μετατροπέας θα σας δώσει την τιμή που γράφετε στο φύλλο στυλ.
Ορισμένες διαστάσεις δεν διαιρούνται ακριβώς με το 16, γι’ αυτό το αποτέλεσμα φαίνεται με έως τέσσερα δεκαδικά ψηφία. Τα 13 pixel, για παράδειγμα, είναι 0,8125 rem, και το CSS δέχεται αυτόν τον αριθμό όπως είναι. Το πεδίο αποτελέσματος δείχνει κόμμα, ενώ το κουμπί Αντιγραφή αποτελέσματος αντιγράφει το 0.8125 με τελεία, οπότε το επικολλάτε κατευθείαν και γράφετε από πίσω rem.
Με ποιον τύπο μετατρέπονται τα pixel σε rem;
Ο τύπος είναι rem = px ÷ font-size, όπου font-size είναι το μέγεθος γραμματοσειράς του στοιχείου html. Πάρτε έναν τίτλο 28 pixel από το σχέδιο. Με βάση 16 pixel δίνει 28 ÷ 16 = 1,75, οπότε στο φύλλο στυλ γράφετε font-size: 1.75rem.
Οι διαστάσεις που διαιρούνται ακριβώς με το 4 δίνουν τιμή με έως δύο δεκαδικά ψηφία: τα 12 pixel, για παράδειγμα, είναι 0,75 rem. Οι υπόλοιπες ζυγές διαστάσεις δίνουν τρία δεκαδικά ψηφία, όπως τα 14 pixel, που είναι 0,875 rem, και οι μονές δίνουν τέσσερα, όπως τα 15 pixel, που είναι 0,9375 rem. Μια διάσταση όπως τα 13,5 pixel δίνει και πέμπτο δεκαδικό ψηφίο, γι’ αυτό το αποτέλεσμα στρογγυλοποιείται σε τέσσερα και γίνεται 0,8438 rem.
Για την αντίστροφη κατεύθυνση χρησιμοποιήστε τον μετατροπέα rem σε px. Αν χρειάζεστε τιμή σχετική με το μέγεθος γραμματοσειράς του γονικού στοιχείου, μετατρέψτε τη διάσταση στον μετατροπέα px σε em. Αν η διάσταση στο αρχείο είναι σε στιγμές (pt), μετατρέψτε την πρώτα σε pixel με τον μετατροπέα pt σε px.
font-size:13px γίνεται 0.8125rem. Το margin:16px 0 20px γίνεται 1rem 0 1.25rem. Φωτογραφία: Rahul Mishra, Unsplash.Πίνακας μετατροπής px σε rem σε τρία βασικά μεγέθη
| Διάσταση σε pixel | rem με βάση 16 pixel | rem με βάση 10 pixel | rem με βάση 20 pixel |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 11 px | 0,6875 rem | 1,1 rem | 0,55 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 13 px | 0,8125 rem | 1,3 rem | 0,65 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 15 px | 0,9375 rem | 1,5 rem | 0,75 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 17 px | 1,0625 rem | 1,7 rem | 0,85 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 25 px | 1,5625 rem | 2,5 rem | 1,25 rem |
| 26 px | 1,625 rem | 2,6 rem | 1,3 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 50 px | 3,125 rem | 5 rem | 2,5 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 100 px | 6,25 rem | 10 rem | 5 rem |
| 120 px | 7,5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 200 px | 12,5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
Πώς γράφονται σε rem γραμμές από ένα φύλλο στυλ;
| Γραμμή σε pixel | rem με βάση 16 pixel | rem με βάση 10 pixel (62,5%) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
@media (min-width: 48rem) άρχισε να ισχύει σε πλάτος 768 pixel. Όταν ανεβάσαμε το μέγεθος γραμματοσειράς του προγράμματος περιήγησης στα 20 pixel, άρχισε να ισχύει σε πλάτος 960 pixel.Ποιες γραφές δέχεται και υπολογίζει ο μετατροπέας px σε rem;
| Τι γράφετε ή επικολλάτε | Υπολογισμός του μετατροπέα | Τι γίνεται με αυτή τη γραφή |
|---|---|---|
| Πρώτο πεδίο: διάσταση σε pixel, βάση 16 pixel | ||
| 24 | 1,5 rem | Μόνο ο αριθμός, όπως φαίνεται η διάσταση στο πάνελ μετρήσεων της εφαρμογής σχεδίασης. |
| 24px | 1,5 rem | Η μονάδα κολλημένη στον αριθμό: διαβάζουμε τον αριθμό και αγνοούμε το px. |
| 24πχ | 1,5 rem | Το px γραμμένο με ελληνικό πληκτρολόγιο χωρίς αλλαγή γλώσσας γίνεται «πχ»: κρατάμε τον αριθμό. |
| 13,5 | 0,8438 rem | Διάσταση με υποδιαστολή κόμμα: το αποτέλεσμα φαίνεται με τέσσερα δεκαδικά ψηφία μετά τη στρογγυλοποίηση. |
| 1.200 | 0,075 rem | Όταν ο αριθμός έχει μία μόνο τελεία, τη διαβάζουμε πάντα ως υποδιαστολή, άρα η διάσταση είναι 1,2 pixel. Κάτω από το πεδίο εμφανίζεται υπόδειξη· για χίλια διακόσια pixel γράψτε 1200 ή 1 200. |
| 1,200 | 0,075 rem | Το κόμμα σε αυτή τη σελίδα το διαβάζουμε ως υποδιαστολή ακόμη κι αν ακολουθούν τρία ψηφία, άρα και εδώ η διάσταση είναι 1,2 pixel. Κάτω από το πεδίο εμφανίζεται υπόδειξη με τη δεύτερη πιθανή ανάγνωση, 1200. |
| 1200px | 75 rem | Πλάτος περιέκτη με μονάδα και χωρίς διαχωριστικό χιλιάδων: κάνει 75 rem. |
| padding: 20px; | 1,25 rem | Ολόκληρη γραμμή από το φύλλο στυλ: κρατάμε τον αριθμό και αγνοούμε το όνομα της ιδιότητας και το ερωτηματικό. |
| −8px | -0,5 rem | Το τυπογραφικό μείον «−» μπροστά από τον αριθμό το διαβάζουμε ως αρνητικό πρόσημο, όπως σε ένα αρνητικό περιθώριο. |
| Πεδίο «Βασικό font-size»: ο μετατροπέας υπολογίζει τη βάση | ||
| 62,5% | 10 px | Ποσοστό όπως το γράφετε για το στοιχείο html: το 62,5% της προεπιλεγμένης βάσης των 16 pixel είναι 10. |
| font-size: 18px | 18 px | Γραμμή αντιγραμμένη από το φύλλο στυλ: κρατάμε το 18 ως βάση. |
Πώς μετατρέπω διαστάσεις του Figma ή ολόκληρο φύλλο στυλ από px σε rem;
Για λίγες διαστάσεις αρκεί ο μετατροπέας. Όταν οι διαστάσεις είναι πολλές, οι εφαρμογές σχεδίασης και τα εργαλεία build μπορούν να υπολογίσουν μόνα τους το rem.
Διάσταση από αρχείο σχεδίασης
Αντιγράψτε τη διάσταση σε pixel από το πάνελ μετρήσεων και επικολλήστε τη στο πρώτο πεδίο. Αν η σελίδα ορίζει μέγεθος γραμματοσειράς για το στοιχείο html, γράψτε το στο πεδίο Βασικό font-size πριν αντιγράψετε το αποτέλεσμα.Dev Mode στο Figma
Στα πληρωμένα πλάνα το Dev Mode δείχνει τις διαστάσεις κατευθείαν σε rem. Οι ονομασίες εδώ είναι στα αγγλικά, όπως στο περιβάλλον του Figma. Στην ενότητα Code του πάνελ Inspect πατήστε Inspect settings δίπλα στο μενού γλώσσας και διαλέξτε τη μονάδα rem. Για να αλλάξετε τη βάση, επιλέξτε από το ίδιο σημείο Set unit scale… και γράψτε τη βάση στο παράθυρο Unit scale.Συνάρτηση στη Sass
Η Sass διαιρεί αριθμούς με τη συνάρτησηmath.div()από το modulesass:math[3]. Η συνάρτηση@function rem($px) { @return math.div($px, 16px) * 1rem; }κάνει τοrem(24px)ίσο με1.5rem.PostCSS για ολόκληρο φύλλο στυλ
Το πρόσθετο postcss-pxtorem μετατρέπει τα px σε rem στα αρχεία CSS κατά το build[4]. Η προεπιλεγμένη βάση του είναι 16 και με τις προεπιλεγμένες ρυθμίσεις μετατρέπει μόνο τις ιδιότητες γραμματοσειράς: font, font-size, line-height και letter-spacing. Τα media queries μένουν σε pixel.
Pixel: μετατροπή σε άλλες μονάδες
Πηγές
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
Όλες τις τιμές των πινάκων τις υπολογίσαμε από τους ορισμούς των μονάδων και τις ελέγξαμε αριθμητικά πριν από τη δημοσίευση. Τα ιστορικά στοιχεία και οι ονομασίες των τοπικών μονάδων βασίζονται στις πηγές που αναφέρονται παραπάνω.
Τελευταίος έλεγχος περιεχομένου: · συντάχθηκε και ελέγχθηκε από την ομάδα της Arteon
Συχνές ερωτήσεις για τη μετατροπή px σε rem
Πόσα rem είναι τα 16 px;
Τα 16 pixel είναι 1 rem με την προεπιλεγμένη βάση των 16 pixel. Με την τεχνική 62,5%, δηλαδή με βάση 10 pixel, είναι 1,6 rem.
Πόσα rem είναι τα 14 px και τα 12 px;
Με βάση 16 pixel τα 14 pixel είναι 0,875 rem και τα 12 pixel είναι 0,75 rem.
Είναι τα 24 pixel πάντα 1,5 rem;
Αυτό ισχύει μόνο με βάση 16 pixel. Αν η σελίδα γράψει άλλο μέγεθος για το στοιχείο html, διαιρέστε με αυτό: με βάση 10 pixel τα 24 pixel είναι 2,4 rem και με βάση 20 pixel είναι 1,2 rem.
Γιατί διαιρούμε με το 16;
Επειδή τα 16 pixel είναι συνηθισμένη προεπιλογή μεγέθους γραμματοσειράς στα προγράμματα περιήγησης, την οποία ο χρήστης μπορεί να αλλάξει[5]. Στη μέτρησή μας αυτό το μέγεθος χρησιμοποιούσαν τα Chrome, Edge και Firefox πριν από κάθε αλλαγή ρυθμίσεων.
Αλλάζει η τεχνική 62,5% τις τιμές rem στα media queries;
Όχι. Ο κανόνας @media (min-width: 48rem) αρχίζει να ισχύει στα 768 pixel με την τεχνική και χωρίς αυτήν, γιατί το rem μέσα σε media query υπολογίζεται από την αρχική τιμή του μεγέθους γραμματοσειράς[2]. Γι’ αυτό μετατρέψτε τα όρια των media queries διαιρώντας με το 16.
Ποια είναι η διαφορά ανάμεσα στη μετατροπή px σε rem και px σε em;
Το rem υπολογίζεται από το μέγεθος γραμματοσειράς του στοιχείου html, άρα διαιρείτε με την ίδια βάση σε όλη τη σελίδα. Το em υπολογίζεται από το μέγεθος γραμματοσειράς του γονικού στοιχείου, άρα διαιρείτε με το μέγεθος του γονικού. Για αυτόν τον υπολογισμό υπάρχει ο μετατροπέας px σε em.
Πρέπει ένα περίγραμμα 1px να γραφτεί σε rem;
Αν θέλετε το περίγραμμα να μένει πάχους ενός pixel σε κάθε ρύθμιση, αφήστε το 1px. Αν το γράψετε 0.0625rem, για τον αναγνώστη που διάλεξε βάση 20 το πάχος του γίνεται 1,25 pixel. Και το postcss-pxtorem αφήνει την ιδιότητα border σε pixel με τις προεπιλεγμένες ρυθμίσεις του[4].
Μεγαλώνει το κείμενο σε rem με τη ρύθμιση του αναγνώστη;
Ναι. Το κείμενο σε rem μεγαλώνει με το μέγεθος γραμματοσειράς που διαλέγει ο αναγνώστης στο πρόγραμμα περιήγησης, ενώ το κείμενο σε pixel μένει ίδιο. Το κριτήριο 1.4.4 Resize Text των WCAG καλύπτει αυτή την περίπτωση: το κείμενο να μεγεθύνεται έως 200% χωρίς απώλεια περιεχομένου ή λειτουργίας[6].
Βοηθήστε μας να βελτιώσουμε τα εργαλεία μας
Βρήκατε διάσταση που δίνει άλλο αποτέλεσμα στο πρόγραμμα περιήγησής σας ή έχετε μια ιδέα για τον μετατροπέα; Γράψτε μας.