Μετάβαση στο περιεχόμενο
🛠️
Whiz Tools

Μετατροπέας PX σε REM σε EM – Δωρεάν Υπολογιστής Μονάδων CSS

Μετατρέψτε τα pixel σε μονάδες REM και EM άμεσα. Δωρεάν μετατροπέας μονάδων CSS για responsive σχεδιασμό ιστοσελίδων. Υποστηρίζει προσαρμοσμένα μεγέθη γραμματοσειρών και υπολογισμούς σε πραγματικό χρόνο για ακριβή αποτελέσματα.

Μετατροπέας Μονάδων PX, REM και EM

Μετατρέψτε μεταξύ pixel (PX), root em (REM) και em (EM). Εισάγετε μια τιμή σε οποιοδήποτε πεδίο για να δείτε τις ισοδύναμες τιμές στις άλλες μονάδες.

px
px
px
rem
em
Η οπτικοποίηση δεν είναι διαθέσιμη για αρνητικές ή μηδενικές τιμές

Τύποι Μετατροπής

  • PX σε REM: τιμή σε px ÷ μέγεθος ριζικής γραμματοσειράς
  • PX σε EM: τιμή σε px ÷ μέγεθος γραμματοσειράς γονικού στοιχείου
  • REM σε PX: τιμή σε rem × μέγεθος ριζικής γραμματοσειράς
  • EM σε PX: τιμή σε em × μέγεθος γραμματοσειράς γονικού στοιχείου
Υπολογιστής φόρτωσης...
📚

Τεκμηρίωση

Μετατροπέας μονάδων PX, REM και EM

Ένας μετατροπέας px σε rem και em αλλάζει ένα μήκος CSS μεταξύ pixel (px), root em (rem) και em, χρησιμοποιώντας μέγεθος γραμματοσειράς ρίζας και μέγεθος γραμματοσειράς γονικού στοιχείου που ορίζει ο χρήστης. Οι τρεις μονάδες είναι οι συνηθέστεροι τρόποι ορισμού μεγέθους κειμένου και αποστάσεων στη CSS, τη γλώσσα που χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων.

Τι είναι τα px, rem και em;

Ένα pixel (px) είναι σταθερή μονάδα. Ένα πλαίσιο με πλάτος 200px παραμένει πλάτους 200px, ανεξάρτητα από το μέγεθος γραμματοσειράς που χρησιμοποιεί η σελίδα.

Ένα rem («root em») είναι μονάδα που κλιμακώνεται με το μέγεθος γραμματοσειράς του στοιχείου ρίζας της σελίδας, συνήθως της ετικέτας <html>. Τα περισσότερα προγράμματα περιήγησης ορίζουν το μέγεθος γραμματοσειράς ρίζας σε 16px, εκτός αν το αλλάξει ο ιστότοπος. Αν το μέγεθος γραμματοσειράς ρίζας είναι 16px, τότε 1rem ισούται με 16px.

Ένα em είναι μονάδα που κλιμακώνεται με το μέγεθος γραμματοσειράς του γονικού στοιχείου, δηλαδή του στοιχείου που το περιέχει. Αν ένα γονικό στοιχείο έχει font-size: 20px, τότε το 1em μέσα σε αυτό το γονικό στοιχείο ισούται με 20px.

Η βασική διαφορά μεταξύ rem και em είναι το μέγεθος με το οποίο συγκρίνεται καθεμία. Το rem αναφέρεται πάντα στο στοιχείο ρίζας. Το em αναφέρεται στο πλησιέστερο γονικό στοιχείο, επομένως η τιμή του μπορεί να αλλάζει σε κάθε επίπεδο εμφώλευσης.

Πώς υπολογίζεται η μετατροπή px σε rem

Για να μετατρέψετε pixel σε rem, διαιρέστε την τιμή σε pixel με το μέγεθος γραμματοσειράς ρίζας:

r=pRr = \frac{p}{R}

όπου r είναι το μήκος σε rem, p το μήκος σε pixel και R το μέγεθος γραμματοσειράς ρίζας σε pixel.

Λυμένο παράδειγμα

Με το προεπιλεγμένο μέγεθος γραμματοσειράς ρίζας των 16px, τα 24px μετατρέπονται σε:

24 ÷ 16 = 1,5rem

Αν ένας ιστότοπος ορίσει το μέγεθος γραμματοσειράς ρίζας σε 10px (ένα συνηθισμένο τέχνασμα, με τον ορισμό του html { font-size: 62.5%; }, επειδή το 62,5% των 16px είναι 10px), τα ίδια 24px γίνονται:

24 ÷ 10 = 2,4rem

Πώς υπολογίζεται η μετατροπή rem σε px

Για την αντίστροφη μετατροπή, πολλαπλασιάστε την τιμή rem με το μέγεθος γραμματοσειράς ρίζας:

p=r×Rp = r \times R

όπου p είναι το μήκος σε pixel, r το μήκος σε rem και R το μέγεθος γραμματοσειράς ρίζας.

Με ρίζα 16px, το 1.5rem μετατρέπεται ξανά σε 1,5 × 16 = 24px.

Πώς υπολογίζεται η μετατροπή px σε em

Για να μετατρέψετε pixel σε em, διαιρέστε την τιμή σε pixel με το μέγεθος γραμματοσειράς του γονικού στοιχείου:

e=pPe = \frac{p}{P}

όπου e είναι το μήκος σε em και P το μέγεθος γραμματοσειράς του γονικού στοιχείου σε pixel.

Λυμένο παράδειγμα

Αν το μέγεθος γραμματοσειράς του γονικού στοιχείου είναι 20px, τότε τα 24px μετατρέπονται σε:

24 ÷ 20 = 1,2em

Πώς υπολογίζεται η μετατροπή em σε px

Πολλαπλασιάστε την τιμή em με το μέγεθος γραμματοσειράς του γονικού στοιχείου:

p=e×Pp = e \times P

όπου p είναι το μήκος σε pixel, e το μήκος σε em και P το μέγεθος γραμματοσειράς του γονικού στοιχείου.

Με γονικό στοιχείο 20px, το 1.2em μετατρέπεται ξανά σε 1,2 × 20 = 24px.

Πώς υπολογίζεται η μετατροπή rem σε em και em σε rem

Επειδή τα rem και em αναφέρονται σε διαφορετικά μεγέθη γραμματοσειράς, η μετατροπή μεταξύ τους χρειάζεται τόσο το μέγεθος γραμματοσειράς ρίζας όσο και το μέγεθος γραμματοσειράς του γονικού στοιχείου:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

όπου R είναι το μέγεθος γραμματοσειράς ρίζας και P το μέγεθος γραμματοσειράς του γονικού στοιχείου.

Λυμένο παράδειγμα

Με μέγεθος γραμματοσειράς ρίζας 16px και μέγεθος γραμματοσειράς γονικού στοιχείου 20px, το 2rem μετατρέπεται σε:

2 × (16 ÷ 20) = 1,6em

Αν τα μεγέθη γραμματοσειράς ρίζας και γονικού στοιχείου είναι ίσα, 1rem ισούται πάντα με 1em.

Πότε είναι χρήσιμη κάθε μονάδα

Τα pixel είναι κατάλληλα για λεπτομέρειες που δεν πρέπει να αλλάζουν μέγεθος, όπως ένα περίγραμμα 1px ή ένα εικονίδιο σταθερού πλάτους.

Το rem χρησιμοποιείται συχνά για αποστάσεις και τυπογραφία που πρέπει να παραμένουν συνεπείς σε όλη τη σελίδα. Επειδή αναφέρεται πάντα στο μέγεθος γραμματοσειράς ρίζας, μια τιμή rem δεν αλλάζει, ανεξάρτητα από το πόσο βαθιά είναι εμφωλευμένο ένα στοιχείο. Αυτό σημαίνει επίσης ότι οι διατάξεις που βασίζονται σε rem προσαρμόζονται αυτόματα όταν ο χρήστης αυξάνει το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης, κάτι που βοηθά τους αναγνώστες με μειωμένη όραση.

Το em είναι κατάλληλο μέσα σε ένα ενιαίο, αυτοτελές στοιχείο, όπως ένα κουμπί, όπου η εσωτερική απόσταση πρέπει να κλιμακώνεται μαζί με το μέγεθος γραμματοσειράς του ίδιου του κουμπιού. Ένα συνηθισμένο πρόβλημα με το em είναι ότι η επίδρασή του συσσωρεύεται: αν αρκετά εμφωλευμένα στοιχεία χρησιμοποιούν το καθένα font-size: 1.2em, κάθε επίπεδο πολλαπλασιάζει το προηγούμενο, οπότε τα μεγέθη γραμματοσειράς αυξάνονται περισσότερο από όσο προβλεπόταν.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Μετά από τρία επίπεδα, το κείμενο έχει αυξηθεί περίπου κατά 73%, όχι κατά 20%, όπως μπορεί να περίμενε ένας προγραμματιστής από έναν μόνο κανόνα 1.2em.

Χρήση του μετατροπέα

  1. Εισαγάγετε μια τιμή στο πεδίο pixel, rem ή em.
  2. Τα άλλα δύο πεδία ενημερώνονται αυτόματα, με στρογγυλοποίηση σε τέσσερα δεκαδικά ψηφία.
  3. Ορίστε το μέγεθος γραμματοσειράς ρίζας ώστε να αντιστοιχεί στο στοιχείο <html> του έργου. Στα περισσότερα προγράμματα περιήγησης είναι από προεπιλογή 16px και επηρεάζει μόνο το rem.
  4. Ορίστε το μέγεθος γραμματοσειράς γονικού στοιχείου ώστε να αντιστοιχεί στο μέγεθος γραμματοσειράς του στοιχείου μέσα στο οποίο θα βρισκόταν μια τιμή em. Επηρεάζει μόνο το em.
  5. Χρησιμοποιήστε το κουμπί αντιγραφής δίπλα σε ένα πεδίο για να αντιγράψετε την τιμή του.

Και τα δύο πεδία μεγέθους γραμματοσειράς δέχονται ακέραιο αριθμό pixel και η μικρότερη επιτρεπόμενη τιμή είναι 1px. Το κουμπί επαναφοράς διαγράφει την τιμή και επαναφέρει και τα δύο μεγέθη γραμματοσειράς σε 16px.

Κάτω από τα πεδία, το εργαλείο σχεδιάζει μία ράβδο για κάθε μονάδα. Και οι τρεις ράβδοι αναπαριστούν το ίδιο φυσικό μήκος, επομένως έχουν το ίδιο πλάτος, κάτι που αποτελεί γρήγορο έλεγχο ότι η μετατροπή είναι σωστή. Μια ράβδος σχεδιάζεται στο πραγματικό μήκος της σε pixel έως τα 300px· οτιδήποτε μεγαλύτερο κλιμακώνεται προς τα κάτω για να χωρέσει, επομένως μια τιμή 600px και μια τιμή 900px καταλήγουν και οι δύο στα 300px. Οι ράβδοι εμφανίζονται μόνο όταν η τιμή σε pixel είναι μεγαλύτερη από μηδέν.

Συχνές ερωτήσεις

Ποια είναι η διαφορά μεταξύ rem και em; Το rem αναφέρεται πάντα στο μέγεθος γραμματοσειράς του στοιχείου ρίζας. Το em αναφέρεται στο μέγεθος γραμματοσειράς του πλησιέστερου γονικού στοιχείου. Η τιμή rem παραμένει ίδια σε όλη τη σελίδα, ενώ η τιμή em μπορεί να αλλάζει ανάλογα με το βάθος εμφώλευσης του στοιχείου.

Γιατί τα προγράμματα περιήγησης χρησιμοποιούν τα 16px ως προεπιλεγμένο μέγεθος γραμματοσειράς; Τα 16px είναι εδώ και πολύ καιρό το προεπιλεγμένο μέγεθος κειμένου στα κύρια προγράμματα περιήγησης, επειδή διαβάζονται άνετα σε συνηθισμένες οθόνες χωρίς πρόσθετη μορφοποίηση. Οι οδηγίες προσβασιμότητας στον ιστό συνιστούν να μπορεί το κείμενο να αυξηθεί έως και 200% χωρίς να χαλάσει η διάταξη μιας σελίδας, και τα 16px αποτελούν πρακτικό σημείο εκκίνησης για αυτό.

Τι είναι το τέχνασμα του 62,5%; Ο ορισμός του html { font-size: 62.5%; } μετατρέπει το προεπιλεγμένο μέγεθος γραμματοσειράς ρίζας των 16px σε 10px, επειδή το 62,5% των 16 είναι 10. Αυτό απλοποιεί τους υπολογισμούς rem, επειδή 1,6rem ισούται με 16px και 2,4rem ισούται με 24px.

Μπορούν οι τιμές px, rem και em να είναι αρνητικές; Ναι, για ιδιότητες που δέχονται αρνητικά μήκη, όπως τα περιθώρια ή οι μετασχηματισμοί CSS. Η εσωτερική απόσταση δεν μπορεί να είναι αρνητική στη CSS· τα προγράμματα περιήγησης αγνοούν μια αρνητική τιμή εσωτερικής απόστασης. Ο μετατροπέας υποστηρίζει αρνητικές τιμές, αλλά δεν σχεδιάζει ράβδους για αυτές, επειδή μια ράβδος δεν μπορεί να έχει αρνητικό πλάτος.

Πρέπει να μετατρέπεται κάθε τιμή pixel σε rem; Όχι απαραίτητα. Τα περιγράμματα και άλλες λεπτές λεπτομέρειες συνήθως παραμένουν σε pixel, επειδή σπάνια χρειάζεται να κλιμακώνονται με το μέγεθος γραμματοσειράς και μπορεί να φαίνονται ανομοιόμορφα σε πλάτη μικρότερα από ένα pixel. Το rem είναι κατάλληλο για αποστάσεις και τυπογραφία που πρέπει να κλιμακώνονται σύμφωνα με την προτίμηση του χρήστη για το μέγεθος γραμματοσειράς.

Επηρεάζει η επιλογή μονάδας την απόδοση της σελίδας; Όχι. Τα προγράμματα περιήγησης μετατρέπουν κάθε μήκος CSS στην ίδια εσωτερική τιμή κατά τη διάταξη, επομένως τα px, rem και em αποδίδονται εξίσου γρήγορα. Η επιλογή μεταξύ τους επηρεάζει τη συντηρησιμότητα και την προσβασιμότητα, όχι την ταχύτητα.