Satuan CSS

Satuan CSS

Ada beberapa jenis unit panjang yang digunakan untuk CSS.

Banyak properti CSS menerima nilai 'panjang', seperti width,margin,padding,font-size et.

Panjang adalah angka yang diikuti dengan unit panjang, seperti 10px,2em et.

Contoh

Setel panjang berbeda menggunakan px (piksel):

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Coba sendiri

Tidak boleh ada ruang di antara angka dan unit. Namun, jika nilai adalah 0, unit dapat dipungkiri.

Untuk beberapa properti CSS, panjang negatif diizinkan.

Ada dua jenis unit panjang untuk CSS.unit absolutdanunit relatif.

panjang absolut

Unit panjang absolut tetap, panjang yang diwakili dengan setiap panjang absolut akan ditampilkan dengan akurat ukuran ini.

Tidak disarankan untuk menggunakan unit panjang absolut di layar, karena ukuran layar berubah-ubah. Namun, jika media output diketahui, mereka dapat digunakan, seperti dalam layout cetak (print layout).

unit penjelasan TIY
cm sentimeter Coba sendiri
mm miliimeter Coba sendiri
in inci (1in = 96px = 2.54cm) Coba sendiri
px * piksel (1px = 1/96 dari 1in) Coba sendiri
pt poin (1pt = 1/72 dari 1in) Coba sendiri
pc pika (1pc = 12 pt) Coba sendiri

* pixel (px) adalah berbanding dengan peralatan penonton. Untuk peralatan dpi rendah, 1px adalah titik peralatan (piksel) papan monitor. Untuk pemroses dan layar resolusi tinggi, 1px mewakili beberapa titik peralatan.

panjang relatif

Unit panjang relatif diatur untuk panjang yang berbanding dengan satu properti panjang lain. Unit panjang relatif menunjukkan performa penyesuaian yang lebih baik diantara media perecapan yang berbeda.

unit penjelasan TIY
em berbanding dengan ukuran tulisan elemen (font-size) (2em adalah 2 kali ukuran tulisan sekarang) Coba sendiri
ex berbanding dengan x-height tulisan sekarang (sedikit digunakan) Coba sendiri
ch berbanding dengan lebar '0' (nol) Coba sendiri
rem ukuran tulisan yang berbanding dengan elemen utama (font-size) Coba sendiri
vw berbanding dengan lebar viewport* 1% Coba sendiri
vh berbanding dengan tinggi viewport* 1% Coba sendiri
vmin berbanding dengan ukuran kecil 1% daripada viewport* Coba sendiri
vmax Berbanding dengan saiz yang lebih besar daripada larang pandang* 1% Coba sendiri
% Berbanding dengan elemen bapa Coba sendiri

Petikan:Unit em dan rem boleh digunakan untuk membuat bentuk yang bagus dan dapat berubah!

* Layar Pandang (Viewport) = Saiz Tetingkap Pemaparan. Jika larang pandang 50 sentimeter lebar, maka 1vw = 0.5 sentimeter.

Dukungan Pemetaan Browser

Angka di dalam tabel menunjukkan versi paling awal penggunaan yang mendukung unit panjang ini.

Unit Panjang
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 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0