Belajar css pengukuran atau units

belajar css

Apa itu CSS unit ?

Pada CSS sendiri terdapat beberapa unit atau pengukuran berbeda untuk mengekspresikan panjang. Didalam property css ada nilai yang harus diisi dalam pengukuran atau unit seperti: property width, height, margin, padding , font-size dan yang lainnya, dimana property 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.

UnitDeskripsi
emRelatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
exRelatif terhadap tinggi x font saat ini (jarang digunakan)
chRelatif dengan lebar “0” (nol)
remRelatif terhadap ukuran font elemen root
vwRelatif dengan 1% dari lebar viewport *
vhRelatif terhadap 1% dari ketinggian viewport *
vminRelatif terhadap 1% dari dimensi viewport * yang lebih kecil
vmaxRelatif terhadap 1% dari dimensi viewport * yang lebih besar
%Relatif terhadap elemen induk

Unit em dan rem praktis dalam menciptakan tata letak yang dapat diskalakan sempurna!  * Viewport = ukuran jendela browser. Jika lebar viewport 50cm, 1vw = 0,5cm.

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.

UnitDeskripsi
cmsentimeter
mmmillimeters
ininci (1in = 96px = 2.54cm)
px *piksel (1px = 1/96 dari 1 dalam)
ptpoin (1pt = 1/72 dari 1 dalam)
pcpicas (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 unitChromeInternet exploreFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0Tidak mendukung19.07.020.0

Internet Explorer 9 mendukung vmin dengan nama yang tidak standar: vm.

Sumber diambil dari: https://www.w3schools.com/css/css_units.asp

Leave a Reply

Your email address will not be published. Required fields are marked *