CSS Units Konverter

Konversi antara px, rem, em, vw, vh, pt, cm, mm, in, dan % dengan konteks yang dapat dikonfigurasi.

Pengaturan konteks

Konversi

Hasil

Referensi satuan CSS

Satuan absolut

Satuan relatif

Kapan menggunakan rem atau em?

Gunakan rem untuk dimensi yang konsisten (margin, padding, ukuran font) · selalu mengacu pada root. Gunakan em saat Anda ingin dimensi relatif terhadap induk, seperti komponen bersarang yang beradaptasi dengan konteksnya.

Mengapa px tidak selalu sama dengan satu piksel fisik?

px CSS adalah "piksel referensi" yang didefinisikan sebagai 1/96 inci pada jarak lengan. Pada layar berkepadatan tinggi (HiDPI), 1 px CSS dapat berhubungan dengan 2 atau 3 piksel fisik.

Piksel referensi CSS, landasan setiap satuan absolut

Satuan absolut CSS (in, cm, mm, Q, pt, pc, px) ditautkan ke piksel referensi CSS. W3C CSS Values and Units Module Level 3 mendefinisikannya sebagai «sudut visual dari satu piksel pada perangkat dengan kepadatan piksel perangkat 96 dpi dan jarak dari pembaca sepanjang lengan.» Untuk panjang lengan sekitar 28 inci, sudut visual tersebut kira-kira 0,0213°, setara dengan sekitar 0,26 mm lebar layar fisik pada jarak pandang yang khas, dan spec menggambarkan bahwa sudut visual yang sama diterjemahkan menjadi sekitar 1,3 mm pada 12 kaki, itulah mengapa piksel proyektor dan TV bisa lebih besar secara fisik tetapi tetap dihitung sebagai satu piksel CSS.

Untuk layar, spec mendefinisikan CSS 1in = 96 px daripada menurunkan dari inci layar yang sebenarnya. Ini berarti konversi dalam tabel di atas bersifat tepat dan tidak bergantung pada DPI tampilan: 12 pt selalu 16 px, 1 pc selalu 16 px, 1 mm selalu sekitar 3,78 px. Pada tampilan high-DPI (Retina, 4K), sistem operasi memetakan setiap piksel CSS ke piksel perangkat mana pun yang paling mendekati sudut visual, biasanya 2 piksel perangkat per piksel CSS pada Retina MacBook, 3 pada iPhone Pro, 1,5 pada desktop Windows dengan skala 150%. Border 1px yang tajam pada layar Retina membutuhkan 2 piksel perangkat.

Satuan font-relatif

Satuan ini diselesaikan terhadap tipografi daripada inci fisik. Satuan ini adalah fondasi tata letak yang aksesibel dan dapat diskalakan.

em adalah landasan, dengan kedalaman sejarah yang mengejutkan; ia mendahului CSS sekitar 500 tahun. Dalam percetakan tipe bergerak (pasca-Gutenberg, c. 1450), «em quad» adalah blok logam persegi yang lebarnya sama dengan tinggi badan cetak, secara historis mendekati lebar huruf kapital M. CSS meminjam abstraksi tersebut: 1em sama dengan font-size yang dihitung dari elemen saat ini. Gotcha yang terkenal adalah bahwa deklarasi font-size: 1.2em bersarang saling mengalikan; anak dengan 1.2em di dalam induk dengan 1.2em dirender 1,44× dari nenek moyang.

rem («root em») ditambahkan di CSS3 untuk menyelesaikan masalah penggandaan tersebut. 1rem sama dengan font-size dari elemen root <html>, tidak terpengaruh oleh penyarangan induk. Browser secara default menetapkan root ke 16 px kecuali pengguna menggantinya, sehingga 1rem = 16px dalam kondisi default. rem dikirimkan di Safari 4.1 dan Firefox 3.6 pada tahun 2010, IE9 pada Maret 2011, IE8 tidak pernah mendukungnya, yang memaksa fallback px hingga sekitar 2014.

Satuan font-relatif baru (CSS Values 4) mencakup ch (lebar karakter «0» pada font saat ini, berguna untuk max-width panjang baris seperti max-width: 60ch atau 66ch, yang berada dalam rentang baca ideal tipografis 45-75 karakter), ex (x-height font), cap (tinggi huruf kapital), ic (kemajuan ideograf CJK 水), dan lh / rlh (line-height yang dihitung dari elemen / root, berguna untuk ritme vertikal).

Satuan persentase viewport (dan masalah address bar seluler)

Empat klasik, vw, vh, vmin, vmax: mewakili 1% lebar viewport, 1% tinggi viewport, 1% dari yang lebih kecil dari keduanya, dan 1% dari yang lebih besar. Pada 1920 × 1080: 1vw = 19.2px, 1vh = 10.8px.

100vh adalah masalah yang sudah lama ada di perangkat seluler karena iOS Safari dan Chrome Mobile menampilkan URL bar yang menyusut saat Anda menggulir. Browser harus memilih: membuat 100vh sama dengan viewport pendek (URL bar terlihat, konten terpotong setelah gulir) atau yang tinggi (URL bar tersembunyi, ruang kosong besar pada render awal). iOS Safari memilih perilaku tinggi, membuat developer men-debug «mengapa hero section saya lebih tinggi dari layar?» selama bertahun-tahun.

Upaya Interop 2022 (Apple, Google, Igalia, Microsoft, Mozilla dan lainnya) menambahkan varian viewport baru pada Maret 2022 untuk memperbaiki ini:

Resep praktis: min-height: 100svh pada hero section agar tidak terpotong di iOS, atau height: 100dvh pada modal layar penuh. Safari mengirimkan dukungan pertama (15.4, Maret 2022); Firefox 101 (Mei 2022); Chrome dan Edge 108 (Desember 2022). Dukungan global kini sudah luas.

Satuan container query

Keluarga baru, cqw, cqh, cqi, cqb, cqmin, cqmax: memungkinkan elemen menentukan ukurannya berdasarkan containernya daripada viewport. Penting untuk desain berbasis komponen di mana komponen yang sama mungkin muncul dengan lebar 300 px di sidebar dan 900 px di kolom utama. Satuan ini dievaluasi terhadap container leluhur terdekat dengan container-type yang ditetapkan; jika tidak ada container yang memenuhi syarat, spec beralih ke satuan viewport kecil pada sumbu tersebut. Container query (dan satuan) dikirimkan di Chromium 105 pada tahun 2022, Safari 16 pada September 2022, dan Firefox 110 pada Februari 2023, menjadi Baseline yang baru tersedia pada tahun 2023.

Persentase, dan mengapa bukan benar-benar panjang

Persentase bukan satuan panjang per se, melainkan tipe nilai terpisah yang diselesaikan secara kontekstual:

Karena resolusi kontekstual ini, % tidak dapat dikonversi ke px begitu saja tanpa mengetahui dimensi induk; konverter di atas memintanya secara eksplisit.

Panduan praktis) kapan menggunakan apa

Tipografi fluid dengan clamp()

clamp(MIN, PREFERRED, MAX) mengembalikan nilai yang disukai yang dibatasi oleh lantai dan langit-langit. Pola fluid-type klasik menggabungkan lantai dan langit-langit berbasis rem dengan bagian tengah yang digerakkan oleh vw:

h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

Suku tengah menskalakan secara linear dengan viewport, sementara lantai dan langit-langit berbasis rem mencegah ukuran ekstrem dan mempertahankan skala font pengguna. clamp() mencapai Baseline yang tersedia luas pada Juli 2020 (Chrome 79, Firefox 75, Safari 13.1). Alat seperti Utopia (utopia.fyi) dan fluid-type-scale.com menerima lebar viewport min / maks, ukuran font min / maks, dan rasio skala modular (1,2; 1,25; 1,333; 1,5; golden) dan menghasilkan deklarasi siap tempel.

Aksesibilitas, WCAG SC 1.4.4 Resize Text

Standar ini mengharuskan teks dapat diperbesar hingga 200% dari ukuran asli tanpa kehilangan konten atau fungsionalitas. Standar ini tidak mengamanatkan unit tertentu, tetapi teknik yang cukup yang tercantum mencakup «penggunaan pengukuran yang relatif terhadap pengukuran lain dalam konten»; unit relatif (em, rem, %) membuat kepatuhan lebih mudah; tata letak hanya-piksel dapat lulus melalui zoom browser tetapi lebih rapuh. Uji mental: haruskah ini menskalakan ketika pengguna memperbesar ukuran teks default mereka? Jika ya, gunakan rem. Border, padding dekoratif, dan dekorasi murni dapat tetap menggunakan px.

Pertanyaan lainnya

Mengapa 1in tidak benar-benar satu inci di layar saya?

Karena spesifikasi CSS menambatkan satuan absolut ke referensi sudut visual daripada inci fisik. CSS 1in didefinisikan sebagai tepat 96 piksel CSS, yang dipetakan browser ke piksel perangkat mana pun yang paling mendekati referensi pada jarak pandang yang khas. Pada sebagian besar monitor itu berakhir mendekati inci nyata, tetapi pada TV yang dilihat dari seberang ruangan akan lebih besar secara fisik, dan pada laptop high-DPI di pangkuan Anda mungkin sedikit lebih kecil. Untuk pengukuran fisik nyata, gunakan penggaris pada layar.

Apa «trik 62,5%» yang sering disebutkan orang?

Pola yang banyak digunakan: html { font-size: 62.5%; }. Karena 62,5% × 16 = 10, ini membuat 1rem = 10px: nyaman untuk perhitungan mental (1.6rem = 16px, 2.4rem = 24px). Ini diperdebatkan; penentang berpendapat itu mengesampingkan ukuran font default yang disukai pengguna dan sedikit tidak ramah pengguna untuk aksesibilitas. Banyak tim modern memilih rasio dengan penggantian pengguna yang dipertahankan secara eksplisit (mis., menetapkan font-size body dalam rem sehingga cascade menghormati default pengguna).

Kapan saya harus menggunakan vw vs cqw?

Gunakan vw ketika ukuran harus mengikuti viewport (teks hero full-bleed, modal layar penuh). Gunakan cqw ketika ukuran harus mengikuti container komponen: misalnya judul kartu yang lebih besar ketika kartu ada di kolom utama dan lebih kecil ketika di sidebar, terlepas dari ukuran viewport. Satuan container query dikirimkan pada 2022-2023 dan merupakan jawaban yang tepat hampir setiap kali Anda sebaliknya akan menggunakan skala font yang digerakkan media query pada satu komponen.

Apa perbedaan antara dpi dan dppx dalam kueri @media?

Keduanya mengungkapkan resolusi. dppx berarti «dots per CSS pixel», 1dppx = 96dpi, karena CSS mendefinisikan 96 px per inci. @media (min-resolution: 2dppx) menargetkan tampilan kelas Retina di mana setiap piksel CSS dirender dengan setidaknya 2 piksel perangkat. Menggunakan dppx umumnya lebih disukai karena menghindari kebingungan dpi-vs-CSS-inch.

Apakah ada yang dikirim ke server?

Tidak. Konversi ini adalah aritmatika JavaScript sederhana yang berjalan secara lokal di browser Anda. Tidak ada tentang masukan Anda yang dikirim ke mana pun; halaman ini bekerja offline setelah dimuat.

Alat terkait

Gratis PX ke REM Konverter Generator Radius Border CSS Konverter Unit Gratis Online