CSS Unit
CSS memiliki beberapa unit yang berbeda untuk mengekspresikan panjang a.
Banyak properti CSS mengambil "length" nilai-nilai, seperti lebar, margin, padding, font-size, border-width, dll
Panjang adalah nomor yang diikuti oleh satuan panjang, seperti 10px, 2em, dll
Sebuah spasi tidak dapat muncul antara jumlah dan unit. Namun, jika nilai adalah 0, unit dapat dihilangkan.
Untuk beberapa properti CSS, panjang negatif diperbolehkan.
Ada dua jenis unit panjang: relatif dan absolut.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung satuan panjang.
| panjang Satuan | |||||
|---|---|---|---|---|---|
| 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 didukung | 19.0 | Tidak didukung | 20.0 |
Note: Internet Explorer 9 mendukung Vmin dengan nama non-standar: vm.
Panjang relatif
unit panjang relatif menentukan panjang relatif terhadap properti panjang lain. unit panjang relatif skala yang lebih baik antara media rendering yang berbeda.
| Satuan | Deskripsi |
|---|---|
| em | Sehubungan dengan font-size dari elemen (2em means 2 times the size of the current font) Cobalah |
| ex | Sehubungan dengan x-height dari font saat ini (rarely used) Cobalah |
| ch | Sehubungan dengan lebar dari "0" (zero) |
| rem | Sehubungan dengan font-size dari elemen root |
| vw | Sehubungan dengan 1% dari lebar viewport * Cobalah |
| vh | Sehubungan dengan 1% dari ketinggian viewport * Cobalah |
| vmin | Sehubungan dengan 1% dari viewport ini * dimensi lebih kecil Cobalah |
| vmax | Sehubungan dengan 1% dari viewport ini * dimensi lebih besar Cobalah |
| % |
Tip: em The dan rem unit praktis dalam menciptakan tata letak sempurna scalable!
* Viewport = ukuran jendela browser. Jika viewport adalah 50cm lebar, 1vw = 0.5cm.
Absolute Panjang
Unit panjang absolut tetap dan panjang yang dinyatakan dalam semua ini akan muncul sebagai persis ukuran.
unit panjang mutlak tidak dianjurkan untuk digunakan pada layar, karena ukuran layar bervariasi begitu banyak. Namun, mereka dapat digunakan jika media keluaran diketahui, seperti untuk tata letak cetak.
| Satuan | Deskripsi |
|---|---|
| cm | sentimeter Cobalah |
| mm | milimeter Cobalah |
| in | inci (1in = 96px = 2.54cm) Cobalah |
| px * | piksel (1px = 1/96th of 1in) Cobalah |
| pt | poin (1pt = 1/72 of 1in) Cobalah |
| pc | picas (1pc = 12 pt) Cobalah |
* Pixels (px) yang relatif terhadap perangkat tampilan. Untuk perangkat low-dpi, 1px adalah salah satu perangkat pixel (dot) layar. Untuk printer dan layar resolusi tinggi 1px menyiratkan beberapa piksel perangkat.