Konverter Satuan CSS (px, rem, em, pt, vw, vh)
Ubah satuan CSS antara px, rem, em, pt, vw, dan vh dengan ukuran font akar, font elemen, dan ukuran viewport yang bisa Anda atur.
Coba alat lain
Dipilih untuk melengkapi alat iniDesain sering dibuat dalam piksel, sementara CSS modern lebih baik memakai satuan relatif seperti rem agar teks ikut membesar saat pengguna menaikkan ukuran huruf di peramban. Konverter ini mengubah satu nilai ke enam satuan sekaligus: px, rem, em, pt, vw, dan vh. Karena rem, em, vw, dan vh bergantung pada konteks, Anda bisa mengatur ukuran font akar, ukuran font elemen, serta lebar dan tinggi viewport. Bawaannya font 16 px dan viewport 1920 × 1080 piksel.
Cara menggunakan alat ini
- 01Isi nilai dan pilih satuan awalMisalnya 24 px atau 1,5 rem.
- 02Sesuaikan konteks bila perluUbah ukuran font akar jika situs Anda tidak memakai 16 px, atau ukuran viewport sesuai layar yang dituju.
- 03Salin hasilnyaPakai nilai dalam satuan yang Anda butuhkan di CSS.
Kapan berguna?
- Mengubah desain Figma ke CSSMenerjemahkan ukuran piksel dari desain ke rem yang responsif.
- TipografiMenyusun skala ukuran huruf dalam rem dan memeriksa padanannya dalam piksel.
- Tata letak responsifMemperkirakan berapa piksel sebuah ukuran vw atau vh pada layar tertentu.
Contoh
- px ke remDengan font akar 16 px, 24 px = 1,5 rem, dan juga 18 pt.
- pt ke px12 pt = 16 px = 1 rem, ukuran teks dokumen yang umum.
- vw ke pxPada layar selebar 1920 px, 50 vw = 960 px.
Tips untuk hasil lebih baik
- Utamakan rem untuk teksUkuran huruf dalam rem menghormati pengaturan aksesibilitas pengguna, sedangkan px mengabaikannya.
- Hati-hati dengan em bertingkatem dihitung dari font elemen induknya, jadi em di dalam em bisa membesar atau mengecil berlipat. rem selalu mengacu ke font akar.
- Simpan skala tipografiTentukan beberapa ukuran dalam rem, misalnya 0,875, 1, 1,25, dan 1,5 rem, lalu pakai ulang di seluruh situs. Konverter ini membantu memeriksa padanan pikselnya.
Rumus konversi
rem = px ÷ font akar. em = px ÷ font elemen. pt = px × 72 ÷ 96, karena CSS menetapkan 1 inci = 96 px = 72 pt. vw = px ÷ lebar viewport × 100, dan vh = px ÷ tinggi viewport × 100.
Satuan tetap dan relatif
px dan pt adalah satuan tetap dalam CSS. rem dan em relatif terhadap ukuran font, sedangkan vw dan vh relatif terhadap ukuran jendela peramban. Satuan relatif membuat tata letak menyesuaikan diri dengan layar dan pengaturan pengguna.
Piksel CSS dan piksel layar
Satu piksel CSS tidak selalu satu titik di layar. Pada layar beresolusi tinggi, satu piksel CSS bisa terdiri dari dua atau tiga titik fisik, jadi konversi ini berlaku untuk nilai CSS, bukan resolusi layar.
Kesalahan umum
Mengira 1 rem selalu 16 px padahal situs mengubah font akar, menumpuk em di dalam elemen bersarang sehingga ukuran membengkak, dan memakai 100 vh di ponsel. Di peramban ponsel, bilah alamat yang muncul dan hilang membuat 100 vh lebih tinggi dari layar yang terlihat; satuan dvh (dynamic viewport height) menyesuaikan diri dengan bilah tersebut.
Pertanyaan umum
16 px berapa rem?
1 rem jika font akar 16 px, ukuran bawaan peramban.
Apa beda rem dan em?
rem mengacu ke font elemen akar (html), em mengacu ke font elemen induknya.
Berapa pt dalam 1 px?
1 px = 0,75 pt, dan 1 pt = 1,333 px.
Kapan memakai vw dan vh?
Untuk ukuran yang mengikuti layar, misalnya bagian setinggi layar penuh (100 vh) atau judul yang ikut lebar layar.
Apakah font akar selalu 16 px?
Bawaan sebagian besar peramban adalah 16 px, tetapi situs atau pengguna bisa mengubahnya. Isi ukuran yang dipakai situs Anda.