Macam macam satuan pengukuran dalam CSS
Dalam CSS terdapat macam-macam satuan pengukuran atau unit untuk mengisi nilai ekspresi panjang. Dima
Satuan pengukuran dalam CSS
Pada CSS sendiri terdapat beberapa unit atau pengukuran berbeda untuk mengekspresikan panjang. Didalam properti css ada nilai yang harus diisi dalam pengukuran atau unit seperti: properti width
, height
, margin
, padding
, font-size
dan yang lainnya, dimana properti tersebut membutuhkan nilai satuan ukuran seperti 5px, 1em dan yang lainnya. Spasi tidak dapat muncul antara angka dan unit. Namun, jika nilainya 0, unit dapat dihilangkan.
Panjang relatif
Unit panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Satuan panjang relatif lebih baik antara media render yang berbeda.
Unit | Deskripsi |
---|---|
em | Relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini) |
ex | Relatif terhadap tinggi x font saat ini (jarang digunakan) |
ch | Relatif dengan lebar “0” (nol) |
rem | Relatif terhadap ukuran font elemen root |
vw | Relatif dengan 1% dari lebar viewport * |
vh | Relatif terhadap 1% dari ketinggian viewport * |
vmin | Relatif terhadap 1% dari dimensi viewport * yang lebih kecil |
vmax | Relatif terhadap 1% dari dimensi viewport * yang lebih besar |
% | Relatif terhadap elemen induk |
Panjang absolut
Unit panjang absolut adalah tetap dan panjang yang dinyatakan dalam salah satu dari ini akan muncul sebagai ukuran yang tepat.
Satuan panjang absolut tidak direkomendasikan untuk digunakan di layar, karena ukuran layar sangat bervariasi. Namun, mereka dapat digunakan jika media keluaran diketahui, seperti untuk tata letak cetak.
Unit | Deskripsi |
---|---|
cm | sentimeter |
mm | millimeters |
in | inci (1in = 96px = 2.54cm) |
px * | piksel (1px = 1/96 dari 1 dalam) |
pt | poin (1pt = 1/72 dari 1 dalam) |
pc | picas (1pc = 12 pt) |
* Piksel (px) relatif terhadap perangkat yang melihat. Untuk perangkat dpi rendah, 1px adalah satu piksel perangkat (titik) layar. Untuk printer dan layar resolusi tinggi 1px menyiratkan beberapa piksel perangkat.
Dukungan browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung satuan panjang.
Panjang unit | Chrome | Internet explore | Firefox | Safari | Opera |
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | Tidak mendukung | 19.0 | 7.0 | 20.0 |
Sumber diambil dari: https://www.w3schools.com/css/css_units.asp