Μετατροπέας PX σε REM και EM

Πώς να χρησιμοποιήσετε τον μετατροπέα PX σε REM

1. Ορίστε το Μέγεθος γραμματοσειράς ρίζας (px). Είναι 16 σε όλα τα μεγάλα προγράμματα περιήγησης, εκτός αν το φύλλο στυλ σας το αλλάζει. Τα κουμπιά κάτω από το πεδίο αλλάζουν σε 16 px, 10 px (το κόλπο html { font-size: 62.5%; }) ή 18 px.
2. Αν δουλεύετε με em, ορίστε το Μέγεθος γραμματοσειράς γονικού στοιχείου για em (px): το υπολογισμένο μέγεθος γραμματοσειράς του στοιχείου που περιέχει εκείνο που διαμορφώνετε.
3. Στο Μετατροπή τιμής, πληκτρολογήστε στα Εικονοστοιχεία (px), REM ή EM. Τα άλλα δύο πεδία ενημερώνονται καθώς πληκτρολογείτε και η γραμμή από κάτω δείχνει τη διαίρεση που χρησιμοποιήθηκε.
4. Ο Πίνακας μαζικής μετατροπής απαριθμεί συνηθισμένα μεγέθη. Αντικαταστήστε τις Τιμές εικονοστοιχείων με δικά σας design tokens (κλίμακα διαστημάτων, κλίμακα τυπογραφίας…) και χρησιμοποιήστε το Αντιγραφή πίνακα για να επικολλήσετε το αποτέλεσμα σε υπολογιστικό φύλλο ή έγγραφο σχεδίασης.
5. Για να μεταφέρετε υπάρχοντα κώδικα, επικολλήστε τον στο CSS προς μετατροπή, επιλέξτε τις ρυθμίσεις και πατήστε Μετατροπή px σε rem. Το Φόρτωση παραδείγματος δείχνει ένα μικρό φύλλο στυλ. Αντιγράψτε το CSS μετά τη μετατροπή με το κουμπί Αντιγραφή.

Οι τύποι

• rem = px ÷ μέγεθος γραμματοσειράς ρίζας. Με τα προεπιλεγμένα 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ μέγεθος γραμματοσειράς γονικού στοιχείου. Μέσα σε έναν τίτλο 20 px, 10px = 0,5em.
• px = rem × μέγεθος γραμματοσειράς ρίζας και px = em × μέγεθος γραμματοσειράς γονικού στοιχείου.

rem ή em: ποιο να χρησιμοποιήσω;

Το rem («root em») αναφέρεται πάντα στο μέγεθος γραμματοσειράς του στοιχείου html, οπότε το 1.5rem σημαίνει το ίδιο πράγμα παντού στη σελίδα. Είναι η ασφαλέστερη επιλογή για μεγέθη γραμματοσειράς, διαστήματα, μέγιστα πλάτη και κενά διάταξης.

Το em αναφέρεται στο μέγεθος γραμματοσειράς του ίδιου του στοιχείου (για το font-size, του γονικού). Συσσωρεύεται: μια λίστα στο 0,9em ένθετη τρεις φορές καταλήγει στο 0,9 × 0,9 × 0,9 = 73% της βάσης. Αυτό κάνει το em βολικό για πράγματα που πρέπει να κλιμακώνονται με το δικό τους κείμενο (το padding ενός κουμπιού, το μέγεθος ενός εικονιδίου δίπλα σε μια ετικέτα) και επικίνδυνο για την καθολική τυπογραφία.

Γιατί το rem μετράει για την προσβασιμότητα

Πολλοί άνθρωποι αυξάνουν το προεπιλεγμένο μέγεθος γραμματοσειράς στις ρυθμίσεις του προγράμματος περιήγησής τους (για παράδειγμα από 16 σε 20 ή 24 px) αντί να μεγεθύνουν κάθε σελίδα. Τα μεγέθη σε px αγνοούν αυτή την προτίμηση· τα μεγέθη σε rem ή em την ακολουθούν. Αν χρησιμοποιείτε rem για κείμενο και διαστήματα, ολόκληρη η διάταξη μεγαλώνει με την επιλογή του αναγνώστη, κάτι που βοηθά στο κριτήριο επιτυχίας 1.4.4 του WCAG 2.2 (αλλαγή μεγέθους κειμένου έως 200%).

Για τον ίδιο λόγο, αποφύγετε τον ορισμό html { font-size: 16px; } σε px: χρησιμοποιήστε ποσοστό (100% ή 62.5% αν θέλετε 1rem = 10px), ώστε να εξακολουθεί να ισχύει η ρύθμιση του χρήστη.

Τι αλλάζει ο μετατροπέας CSS

Αντικαθιστά τους αριθμούς που ακολουθούνται από px στις δηλώσεις με την τιμή διαιρεμένη με το μέγεθος γραμματοσειράς ρίζας. Δεν αγγίζει ποτέ σχόλια, συμβολοσειρές ή τιμές url().

• Διατήρηση πλάτους περιγραμμάτων και outline σε px: τα border, border-*-width, outline, outline-offset και column-rule μένουν σε px, ώστε οι λεπτές γραμμές να μένουν καθαρές. Το border-radius μετατρέπεται κανονικά.
• Διατήρηση τιμών 1px: κάθε τιμή ανάμεσα στο −1px και στο 1px μένει όπως είναι.
• Μετατροπή media queries σε em (βάση 16px): στις συνθήκες @media, τα rem και em αναφέρονται πάντα στο αρχικό μέγεθος γραμματοσειράς του προγράμματος περιήγησης, ποτέ στον κανόνα html σας, οπότε το εργαλείο διαιρεί με 16 και γράφει εκεί em, όποιο κι αν είναι το μέγεθος ρίζας. Όταν δεν είναι επιλεγμένο, τα media queries κρατούν τα px τους.