Penggaris piksel

Apa itu piksel CSS?

Piksel CSS adalah satuan abstrak browser — px dalam stylesheet Anda. Ia sengaja bukan ukuran fisik: pada tampilan standar satu piksel CSS dipetakan ke satu piksel fisik, sedangkan pada tampilan berkepadatan tinggi (“Retina”) beberapa piksel fisik bekerja sama menggambar satu piksel CSS dengan lebih tajam. Rasionya adalah rasio piksel perangkat (DPR). Desain web terjadi dalam piksel CSS, yang persis dihitung penggaris ini.

Membaca skala px

Dalam mode px, tanda kecil hadir setiap 10 px, tanda sedang setiap 50 px, dan tanda bernomor setiap 100 px. Mengukur tombol: sejajarkan tepi kirinya dengan nol dan baca tempat tepi kanan mendarat — katakanlah, sedikit setelah 120, yaitu sekitar 124 px lebarnya. Untuk pekerjaan yang tepat, taruh garis panduan di kedua tepi dan kurangi bacaannya.

Mengapa mode px tidak perlu kalibrasi

Kalibrasi menjawab pertanyaan fisik: “berapa piksel CSS yang membentuk satu inci nyata pada tampilan ini?” Mode piksel tidak pernah menanyakan itu — ia sekadar menghitung satuan milik browser, yang diketahui halaman ini secara pasti. Itu juga alasan pengukuran px tidak bermakna sebagai ukuran fisik: 100 px adalah jumlah milimeter yang berbeda pada setiap tampilan. Gunakan px untuk desain, dan cm/mm/inci (setelah kalibrasi) untuk dunia fisik.

Piksel vs. titik cetak

Anda kadang melihat “1 px = 1/96 inci.” Itu konvensi cetak dari CSS, dipakai agar stylesheet bisa berkonversi ke satuan fisik di atas kertas — ia tidak mengatakan apa pun tentang layar Anda. Di layar, satu-satunya pernyataan jujur adalah: piksel CSS sebesar apa pun yang dibuat kepadatan tampilan, dan penggaris yang dikalibrasi adalah cara Anda mengetahuinya.

Referensi piksel praktis

• Tinggi huruf khas teks isi (16 px) — kira-kira 11 px
• Tinggi tombol umum — 36–48 px
• Favicon — 16 × 16 px
• Lebar viewport Full HD — 1920 px (px CSS, terlepas dari DPR)

Pertanyaan yang sering diajukan

Seberapa besar satu piksel dalam kehidupan nyata?

Tidak ada jawaban yang tetap. Piksel CSS tidak memiliki ukuran fisik — ia adalah 1/96 inci hanya menurut konvensi untuk cetak. Di layar Anda, ukuran fisiknya bergantung pada kepadatan tampilan, yang persis menjadi alasan penggaris butuh kalibrasi untuk satuan fisik tetapi tidak untuk mode piksel.

Apakah penggaris piksel perlu kalibrasi?

Tidak. Mode piksel menghitung piksel CSS milik browser sendiri, yang diketahui halaman ini secara pasti tanpa pengukuran fisik apa pun. Kalibrasi hanya penting untuk cm, mm, dan inci — satuan dengan ukuran dunia nyata.

Apa itu rasio piksel perangkat (DPR)?

Jumlah piksel fisik layar yang dipakai untuk menggambar satu piksel CSS. DPR 2 (tampilan Retina) memadatkan empat piksel fisik ke dalam setiap piksel CSS untuk rendering yang lebih tajam. Mode piksel penggaris selalu menampilkan piksel CSS, yang merupakan satuan kerja desainer web.