Penukar Unit CSS

Tukar antara px, rem, em, pt, vw, vh, dan % serta-merta, menggunakan saiz fon asas dan dimensi viewport anda sendiri — tidak perlu lagi meneka apa sebenarnya 1.5rem dalam piksel.

Apakah Penukar Unit CSS?

CSS menyokong beberapa unit berbeza untuk saiz — unit mutlak seperti px dan pt, dan unit relatif seperti rem, em, vw, vh, dan %. Unit relatif penting untuk reka bentuk responsif dan mudah diakses (rem khususnya menghormati keutamaan saiz fon pelayar pengguna), tetapi menukar antaranya secara mental sememangnya sukar, kerana hasilnya bergantung pada konteks: saiz fon root, saiz fon elemen semasa, atau dimensi viewport.

Penukar ini melakukan pengiraan tersebut untuk anda: tetapkan saiz fon asas, dimensi viewport, dan nilai yang anda tukar daripada, dan lihat nilai setara dalam setiap unit lain serta-merta — berguna untuk menterjemah ukuran piksel mock-up reka bentuk kepada nilai rem/vw responsif, atau menyemak semula apa yang sebenarnya dipaparkan oleh peraturan CSS sedia ada pada skrin.

Rumus

1rem = 1em = saiz fon asas (lalai 16px)

1pt = 96/72 px ≈ 1.333px

1vw = lebar viewport / 100

1vh = tinggi viewport / 100

1% = nilai rujukan / 100

Cara Mengira

Masukkan nilai yang anda mahu tukar dan pilih unit permulaannya.
Tetapkan saiz fon asas anda (lalai kepada piawaian pelayar iaitu 16px).
Untuk penukaran vw/vh, masukkan lebar dan tinggi viewport sasaran anda.
Baca nilai setara dalam setiap unit lain serta-merta.

Contoh

Pada saiz fon asas 16px, 1.5rem ditukar kepada 24px. Pada lebar viewport 1440px, 5vw ditukar kepada 72px.

Faedah Utama

Tukar antara kesemua 7 unit CSS biasa di satu tempat
Menggunakan saiz fon asas dan viewport sebenar anda, bukan andaian tetap
Hasil serta-merta semasa anda menaip — tiada keperluan membuka alat pembangun pelayar
Percuma, tiada pendaftaran, berjalan sepenuhnya dalam pelayar anda

Kesilapan Biasa

Menganggap 1rem sentiasa bersamaan 16px, tanpa menyemak sama ada saiz fon root telah ditukar
Menggunakan vh untuk susun atur tinggi penuh mudah alih tanpa mengambil kira kelakuan bar alamat pelayar
Menyarangkan saiz fon berasaskan em dan terkejut apabila ia bertambah secara tidak dijangka
Mencampur px dan rem secara tidak konsisten dalam komponen yang sama, merosakkan penskalaan kebolehcapaian

Tips Pro

Utamakan rem berbanding em untuk saiz fon bagi mengelakkan pertambahan yang tidak dijangka dalam komponen bersarang
Gunakan dvh/svh dan bukannya vh untuk susun atur skrin penuh mudah alih jika pelayar sasaran anda menyokongnya
Kekalkan saiz fon asas yang konsisten merentas sistem reka bentuk anda supaya penukaran rem kekal boleh diramal
Semasa menterjemah reka bentuk piksel-sempurna, tukar ruang kepada rem tetapi kekalkan lebar sempadan dan butiran halus lain dalam px

Istilah Utama

Saiz fon root: Saiz fon yang ditetapkan pada elemen html, yang menjadi rujukan bagi semua unit rem
Viewport: Kawasan halaman web yang kelihatan dalam tetingkap pelayar
Unit mutlak: Unit seperti px atau pt dengan saiz sebenar tetap, tidak relatif kepada mana-mana konteks
Unit relatif: Unit seperti rem, em, vw, atau % yang saiznya bergantung pada nilai lain

Kegunaan Biasa

Menukar spesifikasi piksel Figma/Sketch pereka kepada nilai rem untuk CSS yang mudah diakses
Menyemak apa sebenarnya yang dipaparkan saiz fon responsif berasaskan vw pada lebar skrin tertentu
Menterjemah CSS cetak atau e-mel warisan berasaskan pt kepada px atau rem piawaian web
Mengaudit sama ada skala ruang sistem reka bentuk sepadan dengan bersih merentas unit
Menyemak dengan pantas nilai CSS semasa semakan kod tanpa membuka alat pembangun

Soalan Lazim

Apakah beza antara rem dan em?

rem sentiasa relatif kepada saiz fon elemen root (html), jadi ia kekal konsisten tidak kira betapa dalam elemen itu bersarang. em relatif kepada saiz fon elemen semasa itu sendiri, bermakna ia boleh bertambah apabila bersarang — alat ini melayan kedua-duanya sama untuk kesederhanaan, menggunakan saiz fon asas anda.

Mengapa 1rem biasanya bersamaan 16px?

16px ialah saiz fon lalai pelayar untuk elemen root html dalam hampir setiap pelayar. Oleh kerana rem relatif kepada saiz root itu, 1rem bersamaan 16px melainkan halaman (atau tetapan pelayar pengguna) secara khusus menukar saiz fon root.

Untuk apa vw dan vh digunakan?

vw (lebar viewport) dan vh (tinggi viewport) ialah peratusan lebar dan tinggi semasa tetingkap pelayar — 1vw bersamaan 1% lebar viewport. Ia biasa digunakan untuk susun atur skrin penuh dan tipografi responsif yang berskala mengikut skrin.

Adakah piksel sentiasa tepat 1/96 inci?

Mengikut spesifikasi CSS, ya — piksel CSS ditakrifkan sebagai 1/96 inci, itulah juga sebabnya 1pt (1/72 inci) ditukar kepada tepat 96/72 = 1.333 piksel CSS.

Alat berkaitan

Kalkulator Rasio Aspek

Kalkulator Bandwidth

Kalkulator masa Pengunduhan

Kalkulator kos Hosting Cloud

Kalkulator kos CDN

Kalkulator Monetisasi Antarmuka Pemrograman aplikasi