Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Μετατροπέας Pixel σε REM δωρεάν

Μετατρέψτε μεταξύ px, rem, em, pt, vw, vh και % με ρυθμιζόμενο βασικό μέγεθος γραμματοσειράς. Περιλαμβάνει πίνακα αναφοράς για κοινά μεγέθη pixel.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
1rem

Πλαίσιο (επηρεάζει rem/em/vw/vh/%)

Όλες οι μετατροπές για 16 px

Πλησιέστεροι tokens Tailwind (στο 16px ρίζα)

Συνήθη μεγέθη px → rem (με βάση 16px)

Μετατροπή επικολλημένου CSS

Συνηθισμένες χρήσεις

  • PX σε REM για ανάπτυξη ιστούΜετατροπή τιμών pixel σε μονάδες rem για κλιμακωτό, προσβάσιμο CSS. Ορίστε το μέγεθος βασικής γραμματοσειράς και δείτε αμέσως όλες τις ισοδύναμες τιμές.
  • CSS μονάδες για αποκρινόμενο σχέδιοΜετατροπή μεταξύ px, vw, vh και % για δημιουργία διατάξεων που ανταποκρίνονται σωστά σε διαφορετικά μεγέθη και προσανατολισμούς οθόνης.
  • Μετατροπή προδιαγραφών σχεδιασμού σε μονάδες CSSΜεταφράστε τιμές pixel Figma ή Sketch σε μονάδες rem/em για καθαρή, κλιμακωτή εφαρμογή CSS.
  • Αναφορά μονάδας Tailwind CSSΚατανοήστε πώς οι κλάσεις μεγέθους Tailwind CSS χαρτογραφούνται σε τιμές pixel και rem για ακριβή υλοποίηση.
  • Μετατροπή μονάδων CSS για πρότυπα τυπώματοςΜετατροπή μεταξύ px, pt και rem για ερωτήματα μέσων εκτύπωσης και εξόδου PDF CSS.

Πώς λειτουργεί

Όλες οι μετατροπές εκτελούνται εξ ολοκλήρου στον browser σας με χειρόγραφη αριθμητική μηχανή χωρίς εξαρτήσεις. Το εργαλείο μετατρέπει μεταξύ επτά μονάδων CSS (px, rem, em, pt, vw, vh και %) περνώντας κάθε υπολογισμό από τα pixels ως κοινή βάση, με απλή διαίρεση ή πολλαπλασιασμό βάσει του root font size, του font size του γονικού στοιχείου ή των διαστάσεων viewport που ορίσατε.

  1. 1
    Ορίστε τις τιμές πλαισίου
    Πριν από τη μετατροπή, ορίζετε τους τέσσερις αριθμούς που δίνουν νόημα στις σχετικές μονάδες CSS: root font size (προεπιλογή 16px, η προεπιλογή του browser), font size γονικού στοιχείου (για μετατροπές em και %) και πλάτος και ύψος viewport (για vw και vh). Είναι οι ίδιες τιμές που θα χρησιμοποιούσε ο browser σας κατά την επίλυση του CSS.
  2. 2
    Το pixel ως καθολικό ενδιάμεσο
    Ο μετατροπέας καλεί πρώτα toPixels() για να κανονικοποιήσει την είσοδό σας σε ακατέργαστο αριθμό pixels — για παράδειγμα, το 1.5rem γίνεται 1.5 × baseFontPx και το 50vw γίνεται 0.5 × vpWidth. Έπειτα το fromPixels() διαιρεί τα pixels με τον κατάλληλο συντελεστή για τη μονάδα-στόχο. Και οι επτά μονάδες εμφανίζονται ταυτόχρονα στον πίνακα μετατροπής.
  3. 3
    Αναζήτηση πλησιέστερου token Tailwind
    Μετά τη μετατροπή, το εργαλείο υπολογίζει την τιμή rem και σαρώνει δύο σταθερούς πίνακες αναζήτησης — τα δεκατρία tokens font-size του Tailwind (text-xs έως text-9xl) και την κλίμακα αποστάσεών του — βρίσκοντας την πλησιέστερη αντιστοιχία κατά απόλυτη απόσταση. Το = σημαίνει ότι η τιμή είναι ακριβές token· το ≈ σημαίνει την πλησιέστερη προσέγγιση.
  4. 4
    Μαζική επανεγγραφή CSS μέσω regex
    Το πλαίσιο επικόλλησης CSS δέχεται ακατέργαστο κείμενο CSS και εφαρμόζει αντικατάσταση regex: στη λειτουργία px→rem αντιστοιχίζει κάθε token px και αντικαθιστά το αριθμητικό μέρος με value/baseFontPx + rem· στη λειτουργία rem→px κάνει το αντίστροφο. Εμφανίζεται το πλήθος αντικαταστάσεων ώστε να ελέγξετε πόσες τιμές ξαναγράφτηκαν.

Σχετικά εργαλεία

📏

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

Μετατρέψτε μεταξύ μονάδων μήκους, βάρους, θερμοκρασίας, εμβαδού, όγκου και άλλων.

Δοκιμάστε το
📐

Γεννήτρια CSS clamp()

Δημιουργήστε μια ρευστή τιμή CSS clamp() για ανταποκρινόμενη τυπογραφία και απόσταση. Ορίστε ελάχιστο/μέγιστο μέγεθος και εύρος παρατηρητικής θύρας, δείτε ζωντανή προεπισκόπηση και αντιγράψτε το CSS.

Δοκιμάστε το
🟦

Γεννήτρια CSS Grid

Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.

Δοκιμάστε το

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