Pixels σε REM
Μετατρέψτε τις τιμές pixel σε rem για σύγχρονες διατάξεις CSS. rem κλιμακώνεται με το μέγεθος γραμματοσειράς root του χρήστη — καλύτερα για προσβασιμότητα από σταθερά px. Η προεπιλεγμένη ρίζα του προγράμματος περιήγησης είναι συχνά 16 px, επομένως 24 px = 1,5 rem, εκτός εάν το έργο παρακάμπτει το html { font-size }.
Pixel
Μέγεθος γραμματοσειράς root (px)
Αποτέλεσμα
1rem
Πώς να μετατρέψετε το px σε rem
1. Εισαγάγετε την τιμή pixel από το σχέδιό σας (π.χ. 32 px).
2. Ορίστε το μέγεθος της γραμματοσειράς ρίζας (προεπιλογή 16 px εάν δεν έχει αλλάξει).
3. Αντιγράψτε το αποτέλεσμα rem στο φύλλο στυλ σας.
4. Χρησιμοποιήστε το rem για μεγέθη γραμματοσειράς, απόσταση και κλίμακα στοιχείων. px για περιγράμματα γραμμής μαλλιών, εάν χρειάζεται.
Παραδείγματα Px σε rem
Τύπος σώματος και επικεφαλίδας
16 px = 1 rem (προεπιλογή). 24 px = 1,5 rem heading. 14 px = 0,875 rem μικρό κείμενο.
Προσαρμοσμένη ρίζα 10 px (συστήματα σχεδίασης)
Ορισμένες ομάδες ορίζουν html { font-size: 62,5% } άρα 1 rem = 10 px. Στη συνέχεια, 32 px διακριτικό σχεδίασης = 3,2 rem.
Κλίμακα διαστήματος
8 px πλέγμα → 0,5 rem σε ρίζα 16 px. 16 px padding = 1 rem; σταθερός ρυθμός σε κλίμακες που μοιάζουν με ουραίο άνεμο.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν εφαρμόζετε τις προδιαγραφές Figma σε αποκριτικό CSS με προσβάσιμο ζουμ.
• Όταν ευθυγραμμίζεστε με διακριτικά συστήματος σχεδιασμού που ορίζονται στο rem.
• Όταν οι χρήστες παρακάμπτουν το προεπιλεγμένο μέγεθος γραμματοσειράς rem του προγράμματος περιήγησης.
Πότε να επιλέξετε κάτι άλλο
• Όταν το χρειάζεστε σε σχέση με μια ένθετη γραμματοσειρά συστατικού — χρησιμοποιήστε pixel για να em.
• Όταν χρειάζεστε μονάδες θυρών προβολής (vw/vh) για διατάξεις πλήρους οθόνης.
• Όταν ταιριάζετε τα περιθώρια εικονοστοιχείων σε περιθώρια p1:1 px.
rem vs em στο στοιχείο CSS
em ενώσεις μέσα σε ένθετα στοιχεία με διαφορετικά μεγέθη γραμματοσειράς — η πλήρωση στο em αυξάνεται με τοπικό κείμενο. Το rem παραμένει συνδεδεμένο με το root, δίνοντας προβλέψιμη απόσταση μεταξύ των στοιχείων. Πολλές ομάδες χρησιμοποιούν το rem για κλίμακα διάταξης και το em μόνο για την απόσταση μεταξύ των γραμμάτων ή τις μικροπροσαρμογές που συνδέονται με τον τοπικό τύπο.
Ροή εργασιών παράδοσης σχεδίασης
Οι σχεδιαστές εξάγουν px από το Figma. Οι προγραμματιστές διαιρούνται με συμφωνημένη ρίζα (έγγραφο στο README). Όταν το έργο χρησιμοποιεί κόλπο 62,5%, επιβεβαιώστε πριν από τη μετατροπή — οι υποθέσεις μίξης διπλασιάζει ή μειώνει στο μισό τη διεπαφή χρήστη.
Συχνές ερωτήσεις
Τι είναι το rem;
rem = "root em". 1 rem ισούται με το μέγεθος γραμματοσειράς του στοιχείου html, όχι του γονικού στοιχείου.
Γιατί να μην χρησιμοποιείτε το px παντού;
Το διορθωμένο px αγνοεί τις προτιμήσεις γραμματοσειράς του χρήστη. Το rem σέβεται την κλιμάκωση ρίζας για προσβασιμότητα (WCAG).
Προεπιλεγμένο μέγεθος γραμματοσειράς ρίζας;
Τα περισσότερα προγράμματα περιήγησης από προεπιλογή είναι 16 px σε html. Οι χρήστες μπορούν να το αλλάξουν αυτό στις ρυθμίσεις.
Τύπος;
rem = px ÷ rootFontSizePx. Παράδειγμα: 20 px ÷ 16 = 1,25 rem.
Λειτουργεί το rem για περιθώρια και συμπλήρωση;
Ναι — το rem ισχύει για οποιαδήποτε ιδιότητα μήκους CSS, όχι μόνο για το μέγεθος γραμματοσειράς.
Έχουν μεταφορτωθεί δεδομένα;
Όχι. Η μετατροπή λειτουργεί τοπικά.