Cascading style sheets atau biasa dikenal dengan CSS memiliki beberapa pilihan untuk menentukan sebuah ukuran dari masing-masing propertinya. Dengan menggunakan satuan ukur yang tepat tentunya akan semakin mempermudah dalam pembuatan style sebuah elemen.

Sebelum membahas lebih detail satuan ukuran biasanya ini berkaitan dengan css unit. Css unit merupakan sebuah satuan untuk menentukan ukuran dari suatu elemen. Misalnya jika Anda ingin menentukan padding dari sebuah elemen tentunya akan diisi dengan sebuah nilai dan satuan akhir, satuan akhir itulah disebut dengan css unit.

Seperti contoh dibawah ini:

p {
  padding: 10px;
}

Kode diatas dimana kita akan menyeleksi elemen p dengan padding 10px. Padding merupakan propertinya yang diatur, sementara 10 adalah nilainya dan px(pixel) merupakan satuanyya (css unit). Css unit memiliki 2 jenis, diantaranya Absolute dan Relative. Berikut penjelasannya:

Daftar isi

Absolute Unit

Absolute unit akan selalu memiliki ukuran yang sama apapun itu berdasarkan elemen parentnya taupun berdasarkan ukuran layar. Sebagai contoh, jika Anda menggunakan satuan Absolute Unit akan memiliki tampilan yang sama pada layar desktop dan mobile.

Absolute unit digunakan jika Anda tidak memikirkan tampilan responsive. Satuan ukur pada absolute unit seperti Pixel (px).

h2 {
  font-size: 35px;
}

Relative Unit

Relative unit biasanya sering digunakan pada sebuah project yang responsive, karena ukurannya dapat berubah dan menyesuaikan terhadap parent atau ukuran layar. Sehinga Anda tidak perlu lagi banyak merubah kode saat ingin membuatnya lebih responsive.

Berikut satuan Relative Unit yang umum dipakai:

em, lebih cocok digunakan untuk satuan ukur font size.

rem, hampir sama dengan em, ukurannya relatif berdasarkan font-size root elemen html.

vh (view port), digunakan untuk satuan ukur tinggi sebuah elemen

vw (view width), digunakan untuk satuan ukur lebar

%, ukurannya relatif terhadap parent element.


Avatar for Pram Eko

administrator

Pram Eko is devoted to exploring web trends, website developer, and writing about WordPress for almost 8 years.

Leave a Reply

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