Ada
banyak css property menggunakan ukuran dalam nilai (value) nya seperti
margin,padding dan fontsize ,border-width. Kadang kesulitan diawal belajar css
adalah ukuran apa yang dipakai untuk sebuah property tersebut.
Sebuah
ukuran panjang atau lebar harus langsung diikuti dengan unit ukurannya seperti
20px,20pt,2em, dsb tanpa ada spasi / pemisah antara nilai dan unitnya .kecuali
untuk nilai nol diperbolehkan tanpa unit. Untuk beberapa property css boleh
juga benilai negative.
Unit
ukuran ada 2 jenis : yaitu unit ukuran relative dan unit ukuran absolute
(tetap). Unit ukuran relative, yaitu ukuran panjang tergantung dari elemen lain
atau disesuaikan berdasarkan ukuran dari elemen lain. Jenis ukuran ini berubah
membesar dan mengecil sesuai dengan elemen lainnya. Ini berarti ukuran akan
lebih terkontrol apabila di zoom out atau zoom in.
|
Unit
|
Keterangan
|
|
Em
|
Ukuran relative terhadap ukuran font pada
elemen
(2 em artinya 2 kali ukuran semula).
|
|
Ex
|
Relative terhadap tinggi font yang
sedang dipakai dalam elemen (jarang dipakai).
|
|
Ch
|
Relative terhadap lebar angka nol.
|
|
Rem
|
Relative terhadap ukuran font elemen
utama .
|
|
Vw
|
Relative terhadap 1% lebar ukuran
viewport.
|
|
Vh
|
Relative terhadap 1% tinggi ukuran
viewport.
|
|
Vmin
|
Relative terhadap 1% ukuran viewport
terkecil (antara panjang dan lebar).
|
|
Vmax
|
Relative terhadap 1% ukuran viewport
terbesar (antara panjang dan lebar).
|
|
%
|
Ukuran presentase elemen yang
mengurungnya .
|
|
Px
|
Pixel 1/96 inchi.
|
Tips !
Ukuran
font akan terlihat lebih baik jika kita gunakan px atau em. Penggunaan em dan
rem akan lebih baik dilihat ketika zoom out. Gunakan % jika ingin lebar atau
panjang suatu elemen mengikuti wadahnya atau groupnya.
Unit
: ukuran absolute
Adalah ukuran tetap, tidak
berubah dalam kondisi viewport bagaimanapun akan terlihat dalam ukuran tetap
seperti semula. Unit ukuran absolute tidak direkomendasikan ( tidak saya
anjurkan) untuk digunakkan dalam desain sebuah website. Karena sangat
bervariasi ukuran viewport tiap computer, akan tetapi masih dapat kita gunakkan
untuk output yang hasil ukurannya sudah pasti. Misalnya untuk keperluan diprint
out.
|
Unit
|
Keterangan
|
|
Cm
|
Centimeter
|
|
Mm
|
Millimeter
|
|
In
|
inchi (1
inchi=96px) atau 2.54
|
|
Pt
|
Point (1 pt=1/72
inchi)
|
|
Pc
|
Pica (1 pc=12pt)
|
Viewport adalah halaman putih
ketika kita membuka browser internet. Tidak termasuk panel tool,toolbox,scrollbar.hanya
seluas halam putih tempat tampilnya website saja.
EmoticonEmoticon