Langkau ke kandungan utama
LibraTool logoLibraTool

Penukar Piksel ke REM percuma

Tukar antara px, rem, em, pt, vw, vh, dan % dengan saiz fon asas yang boleh dikonfigurasi. Termasuk jadual rujukan untuk saiz piksel biasa.

Berfungsi luar talian selepas dimuatkan
1rem

Konteks (mempengaruhi rem/em/vw/vh/%)

Semua penukaran untuk 16 px

Token Tailwind terdekat (pada akar 16px)

Saiz px biasa β†’ rem (asas 16px)

Tukar CSS yang ditampal

Kegunaan biasa

  • PX ke REM untuk Pembangunan WebTukarkan nilai piksel kepada unit rem untuk CSS yang dapat diskalakan dan boleh diakses. Tetapkan saiz fon asas anda dan lihat serta-merta semua nilai yang setara.
  • Unit CSS untuk Reka Bentuk ResponsifTukarkan antara px, vw, vh dan % untuk membina tata letak yang bertindak balas dengan betul kepada saiz dan orientasi skrin yang berbeza.
  • Tukarkan Spesifikasi Reka Bentuk kepada Unit CSSTerjemahkan nilai piksel Figma atau Sketch kepada unit rem/em untuk pelaksanaan CSS yang bersih dan boleh diskalakan.
  • Rujukan Unit Tailwind CSSFahami cara kelas saiz Tailwind CSS dipetakan kepada nilai piksel dan rem untuk pelaksanaan yang tepat.
  • Tukarkan Unit CSS untuk Helaian Gaya CetakTukarkan antara px, pt dan rem untuk pertanyaan media cetak dan CSS keluaran PDF.

Cara ia berfungsi

Semua penukaran berjalan sepenuhnya dalam pelayar anda menggunakan enjin aritmetik tulisan tangan dengan sifar kebergantungan. Alat ini menukar antara tujuh unit CSS (px, rem, em, pt, vw, vh, dan %) dengan melaluikan setiap pengiraan melalui piksel sebagai asas biasa, mengenakan pembahagian atau pendaraban ringkas terhadap saiz fon akar, saiz fon induk, atau dimensi viewport yang dikonfigurasi anda.

  1. 1
    Tetapkan nilai konteks anda
    Sebelum menukar, anda konfigurasikan empat nombor yang menjadikan unit CSS relatif bermakna: saiz fon akar (lalai 16px, iaitu lalai pelayar), saiz fon elemen induk (untuk penukaran em dan %), dan lebar dan tinggi viewport (untuk vw dan vh). Ini nilai sama pelayar anda akan gunakan apabila menyelesaikan CSS pada masa-jalan.
  2. 2
    Piksel sebagai pertengahan sejagat
    Penukar dahulu memanggil toPixels() untuk menormalkan input anda kepada kiraan piksel mentah β€” contohnya, 1.5rem menjadi 1.5 Γ— baseFontPx, dan 50vw menjadi 0.5 Γ— vpWidth. Kemudian fromPixels() membahagikan kiraan piksel itu dengan faktor sesuai untuk unit sasaran. Kesemua tujuh unit dipaparkan serentak dalam jadual penukaran.
  3. 3
    Carian token Tailwind terdekat
    Selepas menukar, alat ini mengira nilai rem dan mengimbas dua jadual carian berkod tetap β€” tiga belas token saiz-fon Tailwind (text-xs hingga text-9xl) dan skala jarak-nya β€” mencari padanan terdekat mengikut jarak mutlak. Tanda = bermaksud nilai itu token tepat; β‰ˆ bermaksud ia anggaran terdekat.
  4. 4
    Penulisan semula CSV berkelompok melalui regex
    Panel tampal-CSS menerima teks CSS mentah dan mengenakan penggantian regex: dalam mod px→rem ia memadankan setiap token px dan menggantikan bahagian berangka dengan value/baseFontPx + rem; dalam mod rem→px ia melakukan sebaliknya. Kiraan penggantian dipaparkan supaya anda boleh sahkan berapa banyak nilai ditulis semula.

Alat berkaitan

πŸ“

Pentukar Unit

Tukar antara unit panjang, berat, suhu, luas, isi padu dan lain-lain.

Cuba
πŸ“

Penjana clamp() CSS

Jana nilai clamp() CSS yang lancar untuk tipografi dan jarak responsif. Tetapkan saiz min/maks dan julat viewport, lihat pratonton langsung, dan salin CSS satu baris.

Cuba
🟦

Penjana Petak CSS

Reka bentuk petak CSS secara visual β€” trek, unit dan jurang β€” dan salin CSS dan HTML yang dijana.

Cuba

Soalan lazim