Μετατρέψτε μεταξύ εικονοστοιχείων (PX), root em (REM) και em (EM) μονάδων CSS με αυτόν τον απλό υπολογιστή. Απαραίτητος για τον υπεύθυνο σχεδιασμό και ανάπτυξη ιστοσελίδων.
Μετατρέψτε μεταξύ εικονοστοιχείων (PX), root em (REM) και em (EM) μονάδων. Εισάγετε μια τιμή σε οποιοδήποτε πεδίο για να δείτε τις αντίστοιχες τιμές στις άλλες μονάδες.
Η κατανόηση και η μετατροπή μεταξύ των μονάδων CSS είναι απαραίτητη για τον ευέλικτο σχεδιασμό και την ανάπτυξη ιστοσελίδων. Οι μονάδες PX (pixel), REM (root em) και EM είναι θεμελιώδη δομικά στοιχεία που καθορίζουν το πώς τα στοιχεία είναι διαστασιολογημένα και τοποθετημένα σε διαφορετικές συσκευές και μεγέθη οθόνης. Αυτό το ολοκληρωμένο εργαλείο μετατροπής μονάδων σας επιτρέπει να μεταφράζετε εύκολα τις τιμές μεταξύ αυτών των τριών κρίσιμων μονάδων CSS, βοηθώντας σας να δημιουργήσετε πιο ευέλικτους και συντηρήσιμους ιστότοπους.
Τα Pixels (PX) είναι μονάδες σταθερού μεγέθους που παρέχουν ακριβή έλεγχο αλλά στερούνται κλιμάκωσης, ενώ οι μονάδες REM κλιμακώνονται σε σχέση με το μέγεθος γραμματοσειράς του ριζικού στοιχείου και οι μονάδες EM κλιμακώνονται σε σχέση με το μέγεθος γραμματοσειράς του γονικού στοιχείου. Η μετατροπή μεταξύ αυτών των μονάδων μπορεί να είναι δύσκολη, ειδικά όταν εργάζεστε με σύνθετους σχεδιασμούς ή όταν υποστηρίζετε δυνατότητες προσβασιμότητας όπως η αλλαγή μεγέθους κειμένου. Ο μετατροπέας PX, REM και EM απλοποιεί αυτή τη διαδικασία, επιτρέποντάς σας να εστιάσετε στη δημιουργία όμορφων, ευέλικτων σχεδίων.
Τα Pixels (PX) είναι η πιο βασική και κοινώς χρησιμοποιούμενη μονάδα CSS. Ένα pixel είναι ένα μόνο σημείο σε ένα ψηφιακό πλέγμα εικόνας και αντιπροσωπεύει το μικρότερο ελεγχόμενο στοιχείο σε μια οθόνη. Στην CSS, τα pixels παρέχουν μια μονάδα μέτρησης σταθερού μεγέθους που παραμένει συνεπής ανεξαρτήτως άλλων παραγόντων στυλ.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Βασικά χαρακτηριστικά των pixels:
Οι μονάδες REM (root em) είναι σχετικές μονάδες που κλιμακώνονται με βάση το μέγεθος γραμματοσειράς του ριζικού στοιχείου (συνήθως το στοιχείο <html>). Από προεπιλογή, οι περισσότερες περιηγητές ορίζουν το μέγεθος γραμματοσειράς του ριζικού στοιχείου σε 16px, κάνοντάς το 1rem ίσο με 16px εκτός και αν αλλάξει ρητά.
1html {
2 font-size: 16px; /* Προεπιλογή στους περισσότερους περιηγητές */
3}
4
5.element {
6 width: 12.5rem; /* Ισοδύναμο με 200px με προεπιλεγμένο μέγεθος γραμματοσειράς ριζικού στοιχείου */
7 font-size: 1rem; /* Ισοδύναμο με 16px */
8 margin: 0.625rem; /* Ισοδύναμο με 10px */
9}
10Βασικά χαρακτηριστικά των μονάδων REM:
Οι μονάδες EM είναι σχετικές μονάδες που κλιμακώνονται με βάση το μέγεθος γραμματοσειράς του γονικού στοιχείου. Αν δεν έχει καθοριστεί μέγεθος γραμματοσειράς για τον γονέα, οι EM θα αναφέρονται στο κληρονομούμενο μέγεθος γραμματοσειράς.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Ισοδύναμο με 16px (20px × 0.8) */
7 margin: 0.5em; /* Ισοδύναμο με 8px (16px × 0.5) */
8}
9Βασικά χαρακτηριστικά των μονάδων EM:
Η κατανόηση των μαθηματικών σχέσεων μεταξύ των μονάδων PX, REM και EM είναι κρίσιμη για ακριβείς μετατροπές. Ακολουθούν οι τύποι που χρησιμοποιούνται στον μετατροπέα μας:
Για να μετατρέψετε pixels σε μονάδες REM, διαιρέστε την τιμή pixel με το μέγεθος γραμματοσειράς του ριζικού στοιχείου:
Για παράδειγμα, με την προεπιλεγμένη ρίζα μεγέθους γραμματοσειράς 16px:
Για να μετατρέψετε pixels σε μονάδες EM, διαιρέστε την τιμή pixel με το μέγεθος γραμματοσειράς του γονικού στοιχείου:
Για παράδειγμα, με μέγεθος γραμματοσειράς γονέα 16px:
Για να μετατρέψετε μονάδες REM σε pixels, πολλαπλασιάστε την τιμή REM με το μέγεθος γραμματοσειράς του ριζικού στοιχείου:
Για παράδειγμα, με την προεπιλεγμένη ρίζα μεγέθους γραμματοσειράς 16px:
Για να μετατρέψετε μονάδες EM σε pixels, πολλαπλασιάστε την τιμή EM με το μέγεθος γραμματοσειράς του γονικού στοιχείου:
Για παράδειγμα, με μέγεθος γραμματοσειράς γονέα 16px:
Για να μετατρέψετε μονάδες REM σε μονάδες EM, πρέπει να λάβετε υπόψη και το μέγεθος γραμματοσειράς του ριζικού και του γονικού στοιχείου:
Εάν και οι δύο ρίζες και οι γονικές γραμματοσειρές είναι ίσες (π.χ. 16px), τότε 1rem = 1em.
Για να μετατρέψετε μονάδες EM σε μονάδες REM, χρησιμοποιήστε τον ακόλουθο τύπο:
Για άλλη μια φορά, εάν και οι δύο γραμματοσειρές είναι ίσες, τότε 1em = 1rem.
Το εργαλείο μετατροπής μας διευκολύνει τη μετάφραση τιμών μεταξύ μονάδων PX, REM και EM. Ακολουθεί ένας οδηγός βήμα προς βήμα για να χρησιμοποιήσετε τον μετατροπέα αποτελεσματικά:
<html> του έργου σαςΗ κατανόηση του πότε να χρησιμοποιείτε κάθε μονάδα CSS και πώς να μετατρέπετε μεταξύ τους είναι κρίσιμη για την αποτελεσματική ανάπτυξη ιστοσελίδων. Ακολουθούν μερικές πρακτικές εφαρμογές και σενάρια όπου ο μετατροπέας μας αποδεικνύεται ανεκτίμητος:
Η μετατροπή μεταξύ μονάδων είναι απαραίτητη για τη δημιουργία πραγματικά ευέλικτων σχεδίων:
1/* Μετατροπή σταθερών τιμών pixel σε ευέλικτες μονάδες REM */
2.container {
3 /* Από: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Από: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Η χρήση σχετικών μονάδων βελτιώνει την προσβασιμότητα σεβόμενη τις προτιμήσεις του χρήστη:
Οι σύγχρονες συστήματα σχεδίασης επωφελούνται από τη στοχαστική χρήση μονάδων:
Η δημιουργία αρμονικής τυπογραφίας απαιτεί προσεκτική επιλογή μονάδων:
1/* Τυπογραφικό σύστημα χρησιμοποιώντας μονάδες REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Όταν εφαρμόζετε σχέδια από εργαλεία όπως το Figma ή το Photoshop:
Ενώ οι μονάδες PX, REM και EM είναι οι πιο κοινές, υπάρχουν εναλλακτικές που αξίζει να εξεταστούν:
Η ιστορία των μονάδων CSS αντικατοπτρίζει την ευρύτερη εξέλιξη του σχεδιασμού ιστοσελίδων, από στατικές διατάξεις μέχρι τις σημερινές προσεγγίσεις που είναι ευέλικτες και προσβάσιμες.
Στις πρώτες μέρες της CSS, τα pixels κυριαρχούσαν. Οι σχεδιαστές ιστοσελίδων δημιουργούσαν διατάξεις σταθερού πλάτους, συνήθως 640px ή 800px πλάτους για να προσαρμοστούν σε κοινές αναλύσεις οθόνης. Η προσβασιμότητα και η ποικιλία συσκευών δεν ήταν σημαντικές ανησυχίες, και ο ακριβής έλεγχος ήταν ο κύριος στόχος.
Καθώς οι διαστάσεις οθόνης διαφοροποιήθηκαν, οι διατάξεις με βάση το ποσοστό κέρδισαν δημοτικότητα. Οι σχεδιαστές άρχισαν να δημιουργούν πιο ευέλικτους σχεδιασμούς, αν και η τυπογραφία συχνά παρέμενε σε μονάδες pixel. Αυτή η εποχή είδε την εισαγωγή των μονάδων EM στην CSS, αν και η υιοθέτησή τους ήταν περιορισμένη λόγω της πολυπλοκότητας της διαχείρισης κληρονομούμενων μεγεθών γραμματοσειράς.
Η εισαγωγή του iPhone το 2007 άλλαξε τον σχεδιασμό ιστοσελίδων. Ξαφνικά, οι ιστότοποι έπρεπε να λειτουργούν σε οθόνες όσο μικρές 320px πλάτους. Αυτό προκάλεσε το ενδιαφέρον για τεχνικές ευέλικτου σχεδιασμού και σχετικών μονάδων. Οι περιορισμοί των μονάδων EM (ιδίως το καταρρακτικό αποτέλεσμα) έγιναν πιο εμφανείς καθώς οι σχεδιασμοί γίνονταν πιο περίπλοκοι.
Η επιδραστική άρθρο του Ethan Marcotte σχετικά με τον ευέλικτο σχεδιασμό ιστοσελίδων το 2010 άλλαξε τον τρόπο που οι προγραμματιστές προσέγγιζαν τις μονάδες CSS. Η μονάδα REM εισήχθη στην CSS3, προσφέροντας τα οφέλη της σχετικής κλιμάκωσης χωρίς τις καταρρακτικές περιπλοκές των μονάδων EM. Η υποστήριξη του προγράμματος περιήγησης για τις μονάδες REM αυξήθηκε σταδιακά κατά τη διάρκεια αυτής της περιόδου.
Η σύγχρονη ανάπτυξη ιστοσελίδων υιοθετεί ένα μείγμα μονάδων για διαφορετικούς σκοπούς:
Αυτή η εξέλιξη αντικατοπτρίζει τη μετάβαση του διαδικτύου από ένα έγγραφο-βασισμένο μέσο σε μια πολύπλοκη πλατφόρμα εφαρμογών που πρέπει να λειτουργεί σε αμέτρητες συσκευές και συμφραζόμενα.
1// Μετατροπή μεταξύ μονάδων PX, REM και EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Παράδειγμα χρήσης
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Βασικά μεγέθη γραμματοσειρών */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Κοινές τιμές pixel μετατραπεί σε REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Κλίμακα τυπογραφίας */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Παράδειγμα χρήσης */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// SCSS συναρτήσεις για μετατροπή μονάδων
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Παράδειγμα χρήσης
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Χρησιμοποιώντας μέγεθος γραμματοσειράς γονέα (18px) για μετατροπή em
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Μετατροπή pixels σε μονάδες REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Μετατροπή μονάδων REM σε pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Μετατροπή pixels σε μονάδες EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Μετατροπή μονάδων EM σε pixels"""
15 return em * parent_font_size
16
17# Παράδειγμα χρήσης
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21Οι μονάδες REM (root em) είναι σχετικές προς το μέγεθος γραμματοσειράς του ριζικού στοιχείου (συνήθως το στοιχείο <html>), ενώ οι μονάδες EM είναι σχετικές προς το μέγεθος γραμματοσειράς του γονικού στοιχείου. Αυτή η βασική διαφορά σημαίνει ότι οι μονάδες REM διατηρούν συνεπή μεγέθη σε όλο το έγγραφο ανεξαρτήτως φωλιάσματος, ενώ οι μονάδες EM μπορούν να δημιουργήσουν ένα καταρρακτικό αποτέλεσμα όταν τα στοιχεία είναι φωλιασμένα.
Δεν υπάρχει μία "καλύτερη" μονάδα για όλες τις καταστάσεις. Ένα μείγμα μονάδων είναι συνήθως πιο αποτελεσματικό:
Η ιδανική προσέγγιση είναι να χρησιμοποιήσετε κάθε μονάδα για αυτό που κάνει καλύτερα μέσα σε ένα συνεκτικό σύστημα.
Η προεπιλογή των 16px καθιερώθηκε ως πρότυπο αναγνωσιμότητας που λειτουργεί καλά σε όλες τις συσκευές. Η έρευνα έχει δείξει ότι το κείμενο γύρω από 16px είναι βέλτιστο για ανάγνωση σε οθόνες σε τυπικές αποστάσεις θέασης. Αυτή η προεπιλογή παρέχει επίσης μια καλή βάση για την προσβασιμότητα, διασφαλίζοντας ότι το κείμενο δεν είναι πολύ μικρό για τους περισσότερους χρήστες.
Ναι, η CSS υποστηρίζει αρνητικές τιμές για πολλές ιδιότητες χρησιμοποιώντας οποιονδήποτε τύπο μονάδας. Τα αρνητικά περιθώρια, οι μετατοπίσεις και οι θέσεις είναι κοινές περιπτώσεις χρήσης για αρνητικές τιμές. Ο μετατροπέας μας χειρίζεται σωστά τις αρνητικές τιμές για όλους τους τύπους μονάδων.
Οι μονάδες EM συσσωρεύονται όταν τα στοιχεία είναι φωλιασμένα. Για παράδειγμα:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Αυτό το καταρρακτικό αποτέλεσμα μπορεί να είναι χρήσιμο για τη δημιουργία αναλογικών σχεδίων αλλά απαιτεί προσεκτική διαχείριση για να αποφευχθεί η μη επιθυμητή κλιμάκωση.
Οι οθόνες υψηλής ανάλυσης χειρίζονται αυτόματα όταν χρησιμοποιείτε σχετικές μονάδες όπως REM και EM. Δεδομένου ότι αυτές οι μονάδες βασίζονται στο μέγεθος γραμματοσειράς και όχι σε φυσικά pixels, κλιμακώνονται κατάλληλα σε οθόνες υψηλής ανάλυσης. Για εικόνες και περιθώρια, σκεφτείτε να χρησιμοποιήσετε media queries με αναλογία pixel της συσκευής ή ανάλυση.
Η υποστήριξη των μονάδων REM και EM στα media queries έχει βελτιωθεί σημαντικά. Η χρήση μονάδων EM στα media queries συνιστάται γενικά γιατί:
1/* Χρήση μονάδων EM για media queries */
2@media (min-width: 48em) { /* 768px με 16px βάση */
3 /* Στυλ tablet */
4}
5
6@media (min-width: 64em) { /* 1024px με 16px βάση */
7 /* Στυλ desktop */
8}
9Τα περισσότερα εργαλεία σχεδίασης λειτουργούν κυρίως με pixels. Όταν εφαρμόζετε σχέδια:
Ορισμένα εργαλεία σχεδίασης διαθέτουν πρόσθετα που μπορούν να βοηθήσουν σε αυτή τη διαδικασία μετατροπής αυτόματα.
Οι περιηγητές χειρίζονται τις υποpixel τιμές διαφορετικά. Ορισμένοι περιηγητές στρογγυλεύουν στην πλησιέστερη pixel, ενώ άλλοι υποστηρίζουν την υποpixel απόδοση για πιο ομαλή κλιμάκωση. Αυτό μπορεί περιστασιακά να προκαλέσει ελαφρές ασυνέπειες μεταξύ των περιηγητών, ειδικά με μικρές τιμές REM/EM ή όταν χρησιμοποιούνται μετατοπίσεις. Για τις περισσότερες περιπτώσεις, αυτές οι διαφορές είναι αμελητέες.
Δεν υπάρχει σημαντική διαφορά απόδοσης μεταξύ της χρήσης pixels, REM ή EM μονάδων σε σύγχρονους περιηγητές. Η επιλογή μονάδων θα πρέπει να βασίζεται στις απαιτήσεις σχεδίασης, τη συμπεριφορά ευελιξίας και τις ανάγκες προσβασιμότητας παρά σε ανησυχίες απόδοσης.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Σταματήστε να αγωνίζεστε με τις χειροκίνητες μετατροπές μονάδων CSS και αφήστε τον μετατροπέα μας PX, REM και EM να κάνει τη δουλειά για εσάς. Είτε δημιουργείτε έναν ευέλικτο ιστότοπο, δημιουργείτε ένα σύστημα σχεδίασης ή απλώς μαθαίνετε για τις μονάδες CSS, αυτό το εργαλείο θα σας εξοικονομήσει χρόνο και θα διασφαλίσει την ακρίβεια. Εισάγετε τις τιμές σας τώρα για να δείτε πόσο εύκολη μπορεί να είναι η μετατροπή μονάδων!
Ανακαλύψτε περισσότερα εργαλεία που μπορεί να είναι χρήσιμα για τη ροή εργασίας σας