Pixels σε REM
Μετατρέψτε τις τιμές pixel σε rem για σύγχρονες διατάξεις CSS. rem κλιμακώνεται με το μέγεθος γραμματοσειράς root του χρήστη — καλύτερα για προσβασιμότητα από σταθερά px.
Πώς να μετατρέψετε το 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 του προγράμματος περιήγησης.
rem vs em στο στοιχείο CSS
em ενώσεις μέσα σε ένθετα στοιχεία με διαφορετικά μεγέθη γραμματοσειράς — η πλήρωση στο em αυξάνεται με τοπικό κείμενο. Το rem παραμένει συνδεδεμένο με το root, δίνοντας προβλέψιμη απόσταση μεταξύ των στοιχείων. Πολλές ομάδες χρησιμοποιούν το rem για κλίμακα διάταξης και το em μόνο για την απόσταση μεταξύ των γραμμάτων ή τις μικροπροσαρμογές που συνδέονται με τον τοπικό τύπο.
Συχνές ερωτήσεις
Τι είναι το 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, όχι μόνο για το μέγεθος γραμματοσειράς.