Μετατρέψτε px, rem, em, pt και % με ζωντανό πίνακα και έτοιμο προς αντιγραφή CSS

Τιμή προς μετατροπή
px
px

το rem είναι σχετικό με το μέγεθος γραμματοσειράς ρίζας· τα em και % είναι σχετικά με τον γονέα.

Μετατρεμμένες τιμές
px
0
rem
0
em
0
pt
0
%
0
Συνηθισμένες τιμές
PXREMEMPT
10
12
14
16
18
20
24
28
32
40
48
64
Απόσπασμα CSS

						

Σχετικά με το Μετατροπέας Pixel σε EM/REM

Ο μετατροπέας pixel σε EM/REM μεταφράζει τιμές μήκους CSS μεταξύ px, rem, em, pt και ποσοστού. Εισαγάγετε μια τιμή σε οποιαδήποτε από τις πέντε μονάδες και ένας ζωντανός πίνακας δείχνει το ισοδύναμό της σε όλες τις υπόλοιπες — μαζί με ένα έτοιμο για αντιγραφή απόσπασμα CSS που μπορείτε να επικολλήσετε απευθείας σε ένα stylesheet.

Οι μετατροπές σέβονται τον τρόπο με τον οποίο η CSS επιλύει πραγματικά τις μονάδες: το rem είναι σχετικό με το μέγεθος γραμματοσειράς της ρίζας, ενώ το em και το % είναι σχετικά με το μέγεθος γραμματοσειράς του γονικού στοιχείου. Και τα δύο μεγέθη αναφοράς είναι επεξεργάσιμα, ώστε να μπορείτε να μοντελοποιήσετε μια ρίζα 16 px με ένα στοιχείο 14 px, ή οποιαδήποτε κλίμακα συστήματος σχεδίασης χρησιμοποιείτε.

Ένας πίνακας κοινών τιμών χαρτογραφεί τα μεγέθη που αναζητούν συχνότερα οι σχεδιαστές — έτσι ερωτήματα όπως «πόσο είναι 24px σε rem» απαντώνται με μια ματιά. Το εργαλείο είναι δωρεάν, ενημερώνεται καθώς πληκτρολογείτε και αποτελεί βασικό βοήθημα για τη μετατροπή στατικών μακετών σε pixel σε προσβάσιμη, κλιμακούμενη CSS με βάση το rem.

Πώς να χρησιμοποιήσετε το Μετατροπέας Pixel σε EM/REM

  1. Εισαγάγετε την τιμή προς μετατροπή και επιλέξτε τη μονάδα της: px, rem, em, pt ή %.
  2. Προσαρμόστε το μέγεθος γραμματοσειράς ρίζας (για το rem) και το μέγεθος γραμματοσειράς γονέα (για em και %) αν διαφέρουν από τα 16 px.
  3. Διαβάστε τις μετατρεπόμενες τιμές στον ζωντανό πίνακα.
  4. Αντιγράψτε το παραγόμενο απόσπασμα CSS ή οποιαδήποτε τιμή από τον πίνακα κοινών τιμών.

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

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

Με το προεπιλεγμένο μέγεθος γραμματοσειράς ρίζας 16 px, τα 16 px ισοδυναμούν ακριβώς με 1 rem. Αλλάξτε το πεδίο μεγέθους ρίζας και ο μετατροπέας επανυπολογίζει — σε ρίζα 18 px, τα 16 px γίνονται περίπου 0,889 rem.

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

Η CSS ορίζει το 1 pt ως 1/72 της ίντσας και το 1 px ως 1/96, οπότε 1 pt = 1,333 px και 12 pt = 16 px. Οι στιγμές εμφανίζονται κυρίως σε stylesheet εκτύπωσης και έγγραφα εισαγόμενα από επεξεργαστές κειμένου.

Για μέγεθος γραμματοσειράς, το % είναι σχετικό με το μέγεθος γραμματοσειράς του γονικού στοιχείου, ακριβώς όπως το em: το 100% ισούται με το μέγεθος του γονέα, οπότε το 87,5% ενός γονέα 16 px είναι 14 px. Ορίστε το πεδίο μεγέθους γονέα ώστε να ταιριάζει με το πλαίσιό σας.

Κοινοποίηση

Δημοφιλείς αναζητήσεις
μετατροπέας px σε rem μετατροπέας px σε em pixel σε rem rem σε px μετατροπέας μονάδων css υπολογιστής px em rem
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.