Μετατροπέας CSS Μονάδων

Αναφορά

CSS Μονάδες

Το CSS προσφέρει τόσο απόλυτες όσο και σχετικές μονάδες. Οι απόλυτες μονάδες όπως px είναι σταθερές ανεξάρτητα από το περιβάλλον. Οι σχετικές μονάδες όπως rem, em και vw κλιμακώνονται βάσει αναφοράς — καθιστώντας τις απαραίτητες για responsive, προσβάσιμα layouts.

px, rem, em, vw

px (pixels) — απόλυτη μονάδα. 1px είναι ένα device-independent pixel. Χρήση για borders, shadows και στοιχεία που δεν πρέπει να κλιμακώνονται με το μέγεθος γραμματοσειράς.

rem (root em) — σχετική με το μέγεθος γραμματοσειράς του root (html) στοιχείου. Προεπιλεγμένο μέγεθος root browser: 16px. Προτιμάται για μεγέθη γραμματοσειράς και spacing γιατί σέβεται τη ρύθμιση μεγέθους γραμματοσειράς του browser του χρήστη.

em — σχετική με το μέγεθος γραμματοσειράς του γονικού στοιχείου. Μπορεί να συσσωρεύεται σε εμφωλευμένα στοιχεία. Χρήσιμο για padding και margins που πρέπει να κλιμακώνονται με το μέγεθος γραμματοσειράς του ίδιου του στοιχείου.

vw (viewport width) — 1vw = 1% του πλάτους viewport. Ιδανικό για fluid typography και layouts πλήρους πλάτους που προσαρμόζονται στο μέγεθος οθόνης.

Κοινές μετατροπές px σε rem

Με την προεπιλεγμένη βάση browser 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Για μονάδες viewport σε σχέδιο 1440px: 14.4px = 1vw, 72px = 5vw.

Γιατί το rem προτιμάται για προσβασιμότητα

Η χρήση rem για μεγέθη γραμματοσειράς σέβεται την προτίμηση μεγέθους γραμματοσειράς του browser του χρήστη. Όταν ο χρήστης ρυθμίζει τον browser στα 20px αντί για τα προεπιλεγμένα 16px, τα layouts βασισμένα σε rem κλιμακώνονται αναλογικά ενώ τα layouts σε px παραμένουν σταθερά. Το WCAG 1.4.4 (Αλλαγή μεγέθους κειμένου) απαιτεί το κείμενο να μπορεί να μεγεθυνθεί μέχρι 200% χωρίς απώλεια περιεχομένου ή λειτουργικότητας — οι μονάδες rem ικανοποιούν φυσικά αυτήν την απαίτηση.

Απόρρητο

Η μετατροπή τρέχει 100% στον browser σας.