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

Μετατροπέας Μονάδων CSS - Υπολογιστής px, rem, em, %

🎨 Μετατρέψτε μεταξύ μονάδων CSS: pixels (px), rem, em, ποσοστά (%), σημεία (pt) και μονάδες viewport (vw, vh). Απαραίτητο εργαλείο για responsive web design και ανάπτυξη.

Τύποι μονάδων CSS

• Απόλυτες μονάδες: px, pt, cm, mm, in - σταθερό μέγεθος ανεξάρτητα από το context
• Σχετικές μονάδες: rem, em, %, vw, vh - κλιμακώνονται με βάση parent ή viewport
• Σχετικές με γραμματοσειρά: rem, em, ch, ex - βασίζονται στο μέγεθος γραμματοσειράς
• Σχετικές με viewport: vw, vh, vmin, vmax - βασίζονται στις διαστάσεις του viewport

Επεξηγήσεις μονάδων

• px (pixels): 1px = 1 pixel συσκευής. Απόλυτη μονάδα, ακριβής αλλά όχι κλιμακούμενη.
• rem: Σχετικό με το root στοιχείο (html). 1rem = 16px από προεπιλογή.
• em: Σχετικό με το μέγεθος γραμματοσειράς του parent. Μπορεί να «συσσωρεύεται» σε nested στοιχεία.
• %: Σχετικό με ιδιότητα του parent. 100% = ίδιο με τον parent.
• pt (points): Μονάδα εκτύπωσης. 1pt = 1/72 ίντσας ≈ 1.333px.
• vw: 1vw = 1% του πλάτους viewport. 100vw = πλήρες πλάτος.
• vh: 1vh = 1% του ύψους viewport. 100vh = πλήρες ύψος.

Συνηθισμένες μετατροπές

• 1rem = 16px (προεπιλογή browser)
• 1em = 16px (αν ο parent είναι 16px)
• 100% = μέγεθος parent στοιχείου
• 12pt = 16px (συνηθισμένο στην εκτύπωση)
• 1vw = 19.2px (σε viewport 1920px)

Μέθοδος 62.5%

Ορίστε html { font-size: 62.5%; } ώστε 1rem = 10px. Αυτό απλοποιεί υπολογισμούς: 1.6rem = 16px, 2.4rem = 24px, κ.λπ.

Ζητήματα προσβασιμότητας

• Χρησιμοποιήστε rem για γραμματοσειρές: σέβεται τις προτιμήσεις μεγέθους γραμματοσειράς του χρήστη
• Αποφύγετε px για γραμματοσειρές: δεν κλιμακώνεται με τις ρυθμίσεις χρήστη
• Χρησιμοποιήστε σχετικές μονάδες: κάνει τα designs προσβάσιμα σε zoom/μεγέθυνση
• Δοκιμάστε διαφορετικά μεγέθη: ελέγξτε σε 200% zoom και ρυθμίσεις μεγάλου κειμένου

Responsive Design

Χρησιμοποιήστε rem για media queries: @media (min-width: 48rem) αντί για 768px. Έτσι, τα breakpoints κλιμακώνονται με τις προτιμήσεις μεγέθους γραμματοσειράς του χρήστη.

💡 Pro Tip: Σύγχρονη βέλτιστη πρακτική: rem για τα περισσότερα μεγέθη (γραμματοσειρές, αποστάσεις, breakpoints), px για borders και λεπτομέρειες, και % ή μονάδες viewport για layouts. Αποφύγετε em για αποστάσεις γιατί μπορεί να «συσσωρευτεί» απρόβλεπτα.