Pixels σε EM
Μετατρέψτε τα px σε em χρησιμοποιώντας το μέγεθος γραμματοσειράς ενός γονικού στοιχείου.
Πώς να μετατρέψετε το 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 στο ίδιο σύστημα.
Αποφυγή σύνθετων παγίδων
Μενού με βαθιά ένθεση με μέγεθος γραμματοσειράς: 0,9em σε κάθε επίπεδο συρρικνώνουν το κείμενο απροσδόκητα. Προτιμήστε rem για μέγεθος γραμματοσειράς σε δομικά επίπεδα. χρησιμοποιήστε τα για τοπική επένδυση που συνδέεται με τον έναν γονέα. Τεκμηριώστε τις γονικές υποθέσεις σε διακριτικά σχεδίασης.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ em και rem;
em αναφέρεται στο μέγεθος της γονικής γραμματοσειράς. Το rem αναφέρεται μόνο σε μέγεθος γραμματοσειράς ρίζας (html).
Γιατί συνδυάζεται το ένθετο em;
Κάθε επίπεδο πολλαπλασιάζεται: 1,2 em μέσα στο 1,2 em γονικό = 1,44 × ρίζα, αν και τα δύο ισχύουν για αλυσίδες μεγέθους γραμματοσειράς.
Τύπος;
em = px ÷ parentFontSizePx. Να χρησιμοποιείτε πάντα το υπολογισμένο μέγεθος γραμματοσειράς του άμεσου γονέα.
Προσθήκη σε em?
Ναι — συμπλήρωση/περιθώριο σε κλίμακα em με το μέγεθος γραμματοσειράς του ίδιου του στοιχείου (για περιθώριο/επένδυση, η προδιαγραφή χρησιμοποιεί μέγεθος γραμματοσειράς στοιχείου).
Πότε προέκυψε το em;
Παραδοσιακά "πλάτος κεφαλαίου Μ" σε μεταλλικό τύπο. τώρα ορίζεται σε σχέση με το μέγεθος της γραμματοσειράς στο CSS.