CSS Academy · Pelajaran

Unit Absolut: px, pt, cm

Pelajari kapan menggunakan unit absolut tetap seperti piksel, poin, dan sentimeter.

Unit Absolut: px, pt, cm adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Unit Absolut vs Relatif

Unit CSS terbagi menjadi dua kategori: absolut (pengukuran tetap di dunia nyata) dan relatif (berskala relatif terhadap hal lain). Unit absolut adalah pengukuran fisik yang tidak bergantung pada perangkat.

px — Piksel

Piksel (px) adalah unit absolut yang paling banyak digunakan pada layar. Pada layar standar, 1px = 1 piksel perangkat. Pada layar dengan DPI tinggi (Retina), piksel CSS dipetakan ke beberapa piksel perangkat sehingga ukuran visual elemen tetap sama.

<button class="button">10px 20px padding</button>

pt — Poin

Poin (pt) adalah unit dari desain cetak: 1pt = 1/72 inci. Dalam CSS, 1pt = 4/3px (sekitar 1,33px). Unit ini terutama digunakan dalam lembar gaya cetak untuk tipografi.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Unit Fisik

CSS mendukung sentimeter (cm), milimeter (mm), dan inci (in). Unit-unit ini cocok untuk konteks cetak, tetapi tidak dapat diandalkan pada layar karena DPI layar beragam.

<div class="page">A4-width page (21cm), used for print layouts</div>

px pada Layar: Praktik

Untuk desain web berbasis layar, px adalah satu-satunya unit absolut yang praktis. Meskipun demikian, penggunaan px untuk ukuran fon tidak disarankan karena mengesampingkan preferensi ukuran fon pengguna di peramban.

Rasio Piksel Perangkat

Layar modern memiliki rasio piksel perangkat (DPR) > 1. Layar Retina 2x menampilkan 2 piksel perangkat untuk setiap piksel CSS. Inilah alasan gambar dengan DPI tinggi perlu berukuran 2x atau 3x dari ukuran tampilannya.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

Kapan Menggunakan px

Gunakan px untuk:

Lebar batas (1px tampak tajam)
Bayangan dan transformasi
Titik henti kueri media (meskipun titik henti berbasis em lebih tangguh)
Elemen UI tetap yang memerlukan pengaturan piksel secara presisi

Kapan TIDAK Menggunakan px untuk Tipografi

Menetapkan font-size: 16px pada html atau body mengesampingkan preferensi aksesibilitas pengguna di banyak peramban. Sebagai gantinya, gunakan rem yang relatif terhadap nilai bawaan peramban.

Q — Seperempat Milimeter

Unit q adalah 1/4 milimeter. Unit ini digunakan dalam tipografi cetak Jepang untuk pengaturan tipografi yang sangat presisi. Jarang digunakan dalam desain web umum.

PC — Pica

Pica (pc) sama dengan 12 poin atau 1/6 inci. Seperti poin, pica adalah unit cetak yang jarang diperlukan untuk layar digital.

Unit Absolut dalam Lembar Gaya Cetak

Lembar gaya cetak adalah kasus penggunaan utama yang tepat untuk unit absolut dalam CSS. Unit fisik memastikan halaman yang dicetak memiliki dimensi yang akurat di atas kertas.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Pemeriksaan Singkat

Unit CSS absolut mana yang setara dengan 1/72 inci?

Rangkuman

Unit absolut adalah pengukuran tetap yang tidak bergantung pada elemen induk. px adalah unit layar yang praktis. Unit fisik (pt, cm, in) digunakan dalam lembar gaya cetak. Hindari penggunaan px untuk tipografi — unit ini mengesampingkan preferensi ukuran fon pengguna. Sebagai gantinya, gunakan rem.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Unit Absolut: px, pt, cm” gratis?

Ya — teks lengkap “Unit Absolut: px, pt, cm” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Unit Absolut: px, pt, cm”?

Pelajari kapan menggunakan unit absolut tetap seperti piksel, poin, dan sentimeter. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Unit Absolut: px, pt, cm” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy