Konverter Satuan CSS (px / rem / em / vh / vw)

Mengapa rem, bukan px

Browser dimulai dari 16px, tetapi orang dengan penglihatan rendah sering memperbesar ukuran font default di pengaturan browser. Teks berukuran rem ikut membesar sesuai pengaturan tersebut; teks berukuran px tidak. Page zoom memperbesar keduanya, tetapi pengaturan font-size adalah yang diandalkan banyak pembaca, dan kriteria resize-text WCAG mengharuskan teks dapat diperbesar hingga 200% tanpa kehilangan fungsi. Gunakan rem untuk ukuran teks dan jarak di sekitarnya, lalu gunakan px untuk garis sangat tipis dan border.

Kolom em dan nesting

Em bersifat relatif terhadap ukuran font elemen itu sendiri, yang untuk font-size berarti ukuran font parent. Nilai em di sini mengasumsikan parent berada pada ukuran root, dan ini hanya berlaku di level teratas. Di dalam elemen 0.875em, 0.875em sekali lagi menghasilkan 12.25px, bukan 14px, dan penyusutan akan terakumulasi. Itulah sebabnya rem merupakan default yang lebih aman, sedangkan em cocok untuk jarak yang harus mengikuti skala teks komponennya.

Basis 62,5% dan unit viewport

Menetapkan html { font-size: 62.5% } membuat 1rem sama dengan 10px sehingga perhitungannya lebih mudah; masukkan 10 sebagai ukuran basis agar sesuai. Ini mengecilkan semua hal lain yang berukuran rem, termasuk komponen pihak ketiga, jadi tetapkan kembali ukuran yang mudah dibaca pada body.

Angka vw dan vh mengasumsikan viewport 1440 × 900. Di ponsel, 100vh dapat lebih tinggi daripada area yang terlihat saat toolbar browser ditampilkan; 100svh dan 100dvh adalah unit yang memperhitungkannya.

Cara menggunakannya

1. Masukkan nilai piksel (px) dan ukuran basis root (default 16px).
2. Lihat nilai rem, em, vw, dan vh yang dihitung.
3. Salin snippet CSS siap pakai atau lihat tabel skala.

Privasi & batasan

Berjalan langsung di JavaScript sisi klien.