Μετατροπέας PX σε REM

Ξεχάστε τις περίπλοκες πράξεις. Μετατρέψτε εύκολα και δωρεάν PX σε REM (και το αντίστροφο) σε πραγματικό χρόνο. Ορίστε το βασικό μέγεθος γραμματοσειράς σας και αφήστε το εργαλείο μας να κάνει τα υπόλοιπα

Κλίμακα: 1rem = 16px

Μετατροπή PX σε REM

Αυτός ο υπολογιστής μετατρέπει τα pixels στη μονάδα CSS REM. Η μετατροπή βασίζεται στην προκαθορισμένη τιμή των 16px (default font-size), η οποία όμως μπορεί να τροποποιηθεί ανάλογα με τις ανάγκες του project σας στο πεδίο (Βασικό Μέγεθος).

Με τη μονάδα rem, μπορείτε να ορίσετε μεγέθη που είναι σχετικά με το μέγεθος γραμματοσειράς του HTML root tag (του κεντρικού στοιχείου της σελίδας). Η μετατροπή λειτουργεί αμφίδρομα: απλώς αλλάξτε την τιμή στο πεδίο που επιθυμείτε και δείτε το αποτέλεσμα στην άλλη πλευρά.

Ένα γρήγορο παράδειγμα

Αν χρησιμοποιήσουμε τη βασική τιμή (16px), τότε το 1px αντιστοιχεί σε 0.0625rem, ενώ στην αντίθετη κατεύθυνση, το 1rem ισούται ακριβώς με 16px.

Ορισμοί & Σημασία

Τι είναι το Pixel (px);

Το Pixel (συντομογραφία του “Picture Element”) είναι η μικρότερη μονάδα μέτρησης σε μια ψηφιακή οθόνη. Είναι μια στατική (absolute) μονάδα. Αυτό σημαίνει ότι αν ορίσεις κάτι στα 16px, αυτό θα παραμείνει 16px ανεξάρτητα από τις ρυθμίσεις του χρήστη ή το μέγεθος της οθόνης. Αν και προσφέρει απόλυτο έλεγχο στο design, δεν είναι η πιο ευέλικτη λύση για το σύγχρονο, responsive web.

Το REM σημαίνει Root EM (Root Element’s Font Size).

  • Root: Αναφέρεται στη “ρίζα” του εγγράφου, δηλαδή στο στοιχείο <html>.

  • EM: Είναι μια παραδοσιακή τυπογραφική μονάδα μέτρησης που βασίζεται στο μέγεθος του γράμματος “M”.

Σε αντίθεση με το Pixel, το REM είναι μια σχετική (relative) μονάδα. Η τιμή του εξαρτάται από το βασικό μέγεθος γραμματοσειράς που έχει οριστεί στον browser (το default είναι σχεδόν πάντα 16px).

  1. Προσβασιμότητα (Accessibility): Αν ένας χρήστης με προβλήματα όρασης έχει ρυθμίσει τον browser του να δείχνει μεγαλύτερα γράμματα, ένα site που χρησιμοποιεί REM θα προσαρμοστεί αυτόματα και θα μεγαλώσει όλο το layout του. Ένα site με Pixels θα παραμείνει “κολλημένο” στο αρχικό του μέγεθος.

  2. Responsive Design: Διευκολύνει τη διατήρηση των αναλογιών σε διαφορετικές συσκευές. Αν αλλάξεις το root font-size στα media queries, όλο το site κλιμακώνεται (scale) αναλογικά.