Τι κάνει το εργαλείο
Ο Μετατροπέας px σε rem & em μετατρέπει τιμές σε pixel (px) σε rem και em, και αντίστροφα. Μπορείτε να εισαγάγετε μια τιμή σε οποιαδήποτε από τις τρεις μονάδες και το εργαλείο υπολογίζει αυτόματα και εμφανίζει τις αντίστοιχες τιμές στις άλλες δύο. Σας επιτρέπει επίσης να ορίσετε ένα δικό σας βασικό μέγεθος γραμματοσειράς (root) και ένα μέγεθος γραμματοσειράς πλαισίου (em context), ώστε οι μετατροπές να είναι ακριβείς για τις δικές σας ανάγκες σχεδιασμού.
Τα πεδία που θα συμπληρώσετε
Η φόρμα έχει τρία πεδία: το «Βασικό μέγεθος γραμματοσειράς root (px)», το «μέγεθος γραμματοσειράς πλαισίου em (px)» και τις «Τιμές» — μια τιμή μήκους σε px, rem ή em. Όταν επεξεργάζεστε οποιοδήποτε από τα πεδία px, rem ή em, τα άλλα δύο ενημερώνονται καθώς πληκτρολογείτε. Η ίδια η διεπαφή σάς καθοδηγεί με την υπόδειξη «Εισαγάγετε μια τιμή px, rem ή em — οι άλλες δύο θα ενημερωθούν καθώς πληκτρολογείτε.» και, μόλις ολοκληρωθεί η μετατροπή, εμφανίζεται η επιβεβαίωση «Μετατράπηκε και στις τρεις μονάδες.»
Το βασικό μέγεθος root και το πλαίσιο em
Το βασικό μέγεθος γραμματοσειράς root είναι αυτό στο οποίο βασίζονται οι τιμές rem, ενώ το μέγεθος γραμματοσειράς πλαισίου em context είναι αυτό του συγκεκριμένου στοιχείου για το οποίο υπολογίζετε τιμές em. Και τα δύο έχουν προεπιλογή 16px, και αρχικά 16px ισοδυναμεί με 1rem και με 1em. Αν αφήσετε τις δύο ρυθμίσεις στην προεπιλογή τους και πληκτρολογήσετε 32 στο πεδίο των τιμών ως px, θα δείτε το πεδίο rem να ενημερώνεται αμέσως σε 2rem και το πεδίο em επίσης σε 2em, αφού και τα δύο μεγέθη αναφοράς παραμένουν στα 16px. Αν αργότερα αλλάξετε το ένα από τα δύο μεγέθη αναφοράς, οι αντίστοιχες μετατροπές rem και em προσαρμόζονται στη νέα βάση, ξεχωριστά η μία από την άλλη.
Αρνητικές τιμές και μηνύματα σφάλματος
Το εργαλείο επιτρέπει την εισαγωγή αρνητικών τιμών pixel. Το βασικό μέγεθος γραμματοσειράς root πρέπει να είναι αριθμός μεγαλύτερος από το 0, όπως και το μέγεθος γραμματοσειράς πλαισίου em context. Αν εισαγάγετε κάτι μη έγκυρο στο πεδίο των τιμών, εμφανίζεται το μήνυμα «Εισαγάγετε έναν αριθμό για μετατροπή.» Αν η τιμή στο βασικό μέγεθος root δεν είναι έγκυρη, βλέπετε το μήνυμα «Το βασικό μέγεθος γραμματοσειράς (root) πρέπει να είναι αριθμός μεγαλύτερος από το 0.» Και αν η τιμή στο πλαίσιο em context δεν είναι έγκυρη, το εργαλείο εμφανίζει «Το μέγεθος γραμματοσειράς πλαισίου em πρέπει να είναι αριθμός μεγαλύτερος από το 0.»
Ο πίνακας συνήθων μετατροπών px → rem
Κάτω από τα πεδία μετατροπής θα βρείτε τον πίνακα «Συνήθεις μετατροπές px → rem (με βάση 16px)», ο οποίος δείχνει κοινές τιμές pixel μετατρεπόμενες σε rem, με παραδοχή βασικού μεγέθους γραμματοσειράς 16px. Είναι χρήσιμος όταν θέλετε μια γρήγορη αναφορά χωρίς να χρειάζεται να πληκτρολογήσετε κάθε τιμή ξεχωριστά στο κύριο πεδίο μετατροπής.
Απόρρητο και επεξεργασία
Κάθε μετατροπή εκτελείται στον περιηγητή σας. Τίποτα από όσα πληκτρολογείτε δεν μεταφορτώνεται στο BroBroGo.
Σε ποιον απευθύνεται αυτό το εργαλείο
Αυτό το εργαλείο απευθύνεται σε όποιον χρειάζεται να μετατρέψει σταθερές τιμές pixel σε σχετικές μονάδες rem ή em για σχεδιασμό που ανταποκρίνεται (responsive design). Είναι επίσης χρήσιμο για όποιον θέλει να καταλάβει πώς διαφορετικά βασικά μεγέθη γραμματοσειράς επηρεάζουν τις τιμές rem, για όποιον χρειάζεται να υπολογίσει τιμές em με βάση το μέγεθος γραμματοσειράς ενός συγκεκριμένου στοιχείου, και για όποιον θέλει να διασφαλίσει ότι οι διαστάσεις του σχεδιασμού του κλιμακώνονται σωστά όταν ένας αναγνώστης αλλάζει το προεπιλεγμένο μέγεθος γραμματοσειράς του.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ px, rem και em;
Η μονάδα px είναι σταθερό μήκος. Η μονάδα rem υπολογίζεται με βάση το βασικό μέγεθος γραμματοσειράς (root) της σελίδας, οπότε με βάση 16px, το 1rem ισούται με 16px. Η μονάδα em υπολογίζεται με βάση το μέγεθος γραμματοσειράς του στοιχείου στο οποίο ανήκει. Η χρήση rem για μεγέθη κειμένου και αποστάσεων επιτρέπει στα πάντα να κλιμακώνονται σωστά όταν ο αναγνώστης αλλάζει την προεπιλεγμένη γραμματοσειρά του περιηγητή του.
Γιατί υπάρχει ξεχωριστό μέγεθος πλαισίου em (em context);
Η μονάδα em είναι σχετική με το μέγεθος γραμματοσειράς του ίδιου του στοιχείου στο οποίο βρίσκεται, το οποίο δεν είναι πάντα το root. Ορίστε το πλαίσιο em (em context) στο μέγεθος γραμματοσειράς αυτού του στοιχείου για να υπολογιστεί σωστά το em, και κρατήστε το ίσο με το root όταν τα δύο μεγέθη συμπίπτουν.
Τι γίνεται αν το βασικό μου μέγεθος (root) δεν είναι 16px;
Αλλάξτε την τιμή στο πεδίο του βασικού μεγέθους γραμματοσειράς (root font size) για να ταιριάζει με το CSS σας και κάθε τιμή rem θα ενημερωθεί αμέσως. Ο γρήγορος πίνακας παρακάτω είναι ένας χρήσιμος οδηγός για την κοινή βάση των 16px από την οποία ξεκινούν οι περισσότεροι ιστότοποι.