Menggunakan Satuan Ukuran Relatif

Update Terakhir pada

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menggunakan satuan ukuran relatif dengan CSS. Nah biar sobat WebHozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.

Salah satu pendekatan penting dalam membuat tampilan yang responsive adalah pemakaian satuan ukuran relatif. Lebar sebuah elemen web tidak menggunakan satuan tetap seperti px (piksel), namun menggunakan prosentase.

Sebagai contoh, tambahkan properti width untuk selector header di file tema.css. Cobalah secara bergantian kedua nilai properti width berikut dan perhatikan perbedaan hasilnya di browser.

Pada selektor header pertama, elemen header dibuat dengan lebar tetap, yaitu 1024px. Jika dilihat dari piranti layar kecil, maka header menjadi terpotong. Sedangkan pada layar yang lebih lebar dari 1024 piksel, header menjadi terlalu kecil dan menyisakan ruang kosong.

Pada selektor header kedu, elemen header dibuat agar lebarnya tetap penuh 100% meskipun dilihat dari piranti berbeda. Header menjadi elegan dan secara dinamis berubah lebarnya mengikuti layar. Jadi, terapkan cara kedua di CSS kalian.

Untuk kebutuhan tertentu misalnya gambar, kalian perlu mebuat class baru yang berisi aturan batas lebar maksimal, tinggi otomatis, dan ditampilkan dalam mode blok. Tujuannya agar gambar tidak terpotong dan me-resize secara otomatis menyesuaikan uuran layar dan lebar elemen induknya. Tambahkan contoh class berikut di file tema.css.

Cobalah class gambar di template web. Sisipkan satu file gambar berukuran besar melalui kode seperti di bawah. Tempatkan kode yang sama di dua elemen yang berbeda, misalnya satu di elemen main dan satu lagi elemen aside.

Hasilnya, baik di layar ponsel maupun desktop, gambar tetap terlihat utuh dan disesuaikan ukurannya secara proporsional mengikuti aturan elemen yang ditempatinya.

Nah sobat Webhozz itulah pembahasan singkat mengenai menggunakan satuan ukuran relatif dengan CSS. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari CSS, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.