Πώς να το χρησιμοποιήσετε
- Ορίστε το μέγεθος γραμματοσειράς ρίζας αν ο ιστότοπός σας το αλλάζει (για παράδειγμα, html { font-size: 62.5% } το κάνει 10px).
- Πληκτρολογήστε μια τιμή σε οποιοδήποτε πεδίο για μετατροπή από px σε rem ή από rem σε px. Αλλάξτε σε em αν ορίζετε μέγεθος σχετικά με γονικό στοιχείο.
- Χρησιμοποιήστε τον πίνακα για γρήγορη αναζήτηση ή επικολλήστε ένα απόσπασμα CSS για να μετατρέψετε όλα τα μήκη px ταυτόχρονα και να αντιγράψετε το αποτέλεσμα.
Πώς λειτουργεί
rem = px ÷ μέγεθος γραμματοσειράς ρίζας. Με προεπιλεγμένη ρίζα 16px, τα 24px είναι 1.5rem και τα 14px είναι 0.875rem. Το em χρησιμοποιεί τον ίδιο τύπο αλλά με το μέγεθος γραμματοσειράς του γονικού στοιχείου, γι' αυτό τα ένθετα em πολλαπλασιάζονται· το rem το αποφεύγει επειδή αναφέρεται πάντα στη ρίζα.
Η χρήση rem για μεγέθη γραμματοσειράς και αποστάσεις επιτρέπει στο κείμενο να κλιμακώνεται όταν κάποιος αυξάνει το προεπιλεγμένο μέγεθος γραμματοσειράς στις ρυθμίσεις του προγράμματος περιήγησης, κάτι που βοηθά άτομα με χαμηλή όραση. Οι τιμές στρογγυλοποιούνται σε τέσσερα δεκαδικά.
Ο μετατροπέας αποσπασμάτων αλλάζει αριθμούς που ακολουθούνται από px. Αφήνει ανέπαφα σχόλια, url(…) και συμβολοσειρές σε εισαγωγικά, διατηρεί το 1px αν το επιλέξετε (τα λεπτά περιγράμματα συνήθως πρέπει να μένουν 1px), γράφει το 0px ως 0 και από προεπιλογή αφήνει τις συνθήκες @media και @container ως έχουν, επειδή στα media queries τα rem και em αναφέρονται πάντα στο αρχικό μέγεθος γραμματοσειράς του προγράμματος περιήγησης, ανεξάρτητα από το μέγεθος γραμματοσειράς ρίζας που ορίσετε. Δεν κατανοεί τη σημασιολογία του calc() πέρα από την αντικατάσταση των αριθμών px μέσα σε αυτό, κάτι που εξακολουθεί να είναι σωστό επειδή κάθε μήκος μετατρέπεται ξεχωριστά.
Παραδείγματα
Προεπιλεγμένο μέγεθος ρίζας
Με ρίζα 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Το κόλπο με 62.5%
Αν το CSS σας ορίζει html { font-size: 62.5% }, η ρίζα είναι 10px, οπότε 14px = 1.4rem και 24px = 2.4rem. Ορίστε το πεδίο μεγέθους γραμματοσειράς ρίζας σε 10 για να συμφωνεί.
Μετατροπή ενός στοιχείου
Το padding: 24px 16px; border: 1px solid #ddd; γίνεται padding: 1.5rem 1rem; border: 1px solid #ddd; με ενεργοποιημένη την επιλογή «Διατήρηση τιμών 1px».
Συχνές ερωτήσεις
Να χρησιμοποιήσω rem ή em;
Χρησιμοποιήστε rem για τα περισσότερα μεγέθη γραμματοσειράς, αποστάσεις και διάταξη, επειδή είναι προβλέψιμο παντού. Χρησιμοποιήστε em όταν κάτι πρέπει να κλιμακώνεται με το μέγεθος κειμένου του δικού του στοιχείου, όπως το padding μέσα σε ένα κουμπί.
Γιατί να μη μετατρέπονται τα media queries σε rem;
Μπορείτε, αλλά σε ένα media query το 1rem ισούται πάντα με το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης (συνήθως 16px), όχι με το δικό σας html font-size. Γι' αυτό ο μετατροπέας τα παραλείπει από προεπιλογή· απενεργοποιήστε την επιλογή αν ούτως ή άλλως διαιρείτε με το 16.
Είναι το rem καλύτερο για την προσβασιμότητα από το px;
Για μεγέθη γραμματοσειράς, ναι: το rem σέβεται τη ρύθμιση προεπιλεγμένου μεγέθους γραμματοσειράς του χρήστη, ενώ τα μεγέθη γραμματοσειράς σε px την αγνοούν. Η μεγέθυνση του προγράμματος περιήγησης λειτουργεί και με τις δύο μονάδες.
Απόρρητο
Οι μετατροπές και το απόσπασμα CSS επεξεργάζονται στο πρόγραμμα περιήγησής σας και δεν αποστέλλονται ποτέ πουθενά.