Pixels σε EM
Μετατρέψτε τα px σε em χρησιμοποιώντας το μέγεθος γραμματοσειράς ενός γονικού στοιχείου. Το em είναι σχετικό με τον άμεσο γονέα — χρήσιμο όταν η συμπλήρωση ενός κουμπιού πρέπει να κλιμακώνεται με το κείμενο της ετικέτας ή μια ένθετη εσοχή λίστας ακολουθεί το τοπικό μέγεθος σώματος. Τύπος: em = px ÷ parentFontSizePx.
Pixel
Μέγεθος γραμματοσειράς γονέα (px)
Αποτέλεσμα
1em
Πώς να μετατρέψετε το px σε em
1. Προσδιορίστε το μέγεθος γραμματοσειράς του γονικού στοιχείου σε px (π.χ. 18 px).
2. Εισαγάγετε την τιμή px για μετατροπή (π.χ. διάστιχο 9 px).
3. Διαβάστε το αποτέλεσμα em (9 ÷ 18 = 0,5 em).
4. Εφαρμογή σε CSS στο θυγατρικό στοιχείο που καλύπτεται σε αυτό το γονικό περιβάλλον.
Παραδείγματα Px σε em
Πλήρωση κουμπιού
Γονική γραμματοσειρά 16 px; κατακόρυφη επένδυση 8 px → 0,5 em. Κλιμακώνει εάν το γονικό μέγεθος γίνει 18 px σε μεγάλες οθόνες.
Ενσωματωμένη επικεφαλίδα
Γραμματοσειρά ενότητας 20 px; διάκριση 24 px σχέδιο → 1,2 em σε σχέση με το τμήμα, όχι τη ρίζα.
Ευθυγράμμιση εικονιδίων
Ενσωματωμένο εικονίδιο 14 px με γραμμή κειμένου 16 px → Το πλαίσιο εικονιδίου 0,875 em ευθυγραμμίζεται με μετρήσεις κειμένου.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν τα εσωτερικά στοιχεία πρέπει να κλιμακώνονται με τοπικές αλλαγές μεγέθους γραμματοσειράς.
• Όταν κάνετε στυλ εμπλουτισμένου κειμένου όπου οι επικεφαλίδες βρίσκονται μέσα σε δοχεία διαφορετικού μεγέθους.
• Όταν το CSS παλαιού τύπου χρησιμοποιούσε em και αντιστοιχίζετε νέα σχέδια px στο ίδιο σύστημα.
Πότε να επιλέξετε κάτι άλλο
• Όταν θέλετε συνεπές διάστημα σε όλο τον ιστότοπο — το rem από τη ρίζα είναι απλούστερο.
• Όταν το deep nesting προκαλεί emreming for bugs περιθώρια.
• Όταν χρειάζεστε μέγεθος σχετικό με το viewport — χρησιμοποιήστε το vw/vh.
Αποφυγή σύνθετων παγίδων
Μενού με βαθιά ένθεση με μέγεθος γραμματοσειράς: 0,9em σε κάθε επίπεδο συρρικνώνουν το κείμενο απροσδόκητα. Προτιμήστε rem για μέγεθος γραμματοσειράς σε δομικά επίπεδα. χρησιμοποιήστε τα για τοπική επένδυση που συνδέεται με τον έναν γονέα. Τεκμηριώστε τις γονικές υποθέσεις σε διακριτικά σχεδίασης.
εμφανίζονται για ερωτήματα πολυμέσων;
Ερώτημα μέσων em οι μονάδες αναφέρονται ιστορικά από προεπιλογή προγράμματος περιήγησης (16 px), όχι γονικό στοιχείο. Η μοντέρνα αποκριτική σχεδίαση χρησιμοποιεί συχνά σημεία διακοπής rem ή px — γνωρίζετε σε ποιο πλαίσιο στοχεύει το φύλλο στυλ σας.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ em και rem;
em αναφέρεται στο μέγεθος της γονικής γραμματοσειράς. Το rem αναφέρεται μόνο σε μέγεθος γραμματοσειράς ρίζας (html).
Γιατί συνδυάζεται το ένθετο em;
Κάθε επίπεδο πολλαπλασιάζεται: 1,2 em μέσα στο 1,2 em γονικό = 1,44 × ρίζα, αν και τα δύο ισχύουν για αλυσίδες μεγέθους γραμματοσειράς.
Τύπος;
em = px ÷ parentFontSizePx. Να χρησιμοποιείτε πάντα το υπολογισμένο μέγεθος γραμματοσειράς του άμεσου γονέα.
Προσθήκη σε em?
Ναι — συμπλήρωση/περιθώριο σε κλίμακα em με το μέγεθος γραμματοσειράς του ίδιου του στοιχείου (για περιθώριο/επένδυση, η προδιαγραφή χρησιμοποιεί μέγεθος γραμματοσειράς στοιχείου).
Πότε προέκυψε το em;
Παραδοσιακά "πλάτος κεφαλαίου Μ" σε μεταλλικό τύπο. τώρα ορίζεται σε σχέση με το μέγεθος της γραμματοσειράς στο CSS.
Μεταφορτώνονται δεδομένα;
Όχι. Η μετατροπή λειτουργεί τοπικά.