Blog

Perbedaan % (Persen) dan vh/vw (Viewport Height/Width) Pada CSS

 

Perbedaan % (Persen) dan vh/vw (Viewport Height/Width) Pada CSS

CSS     11 bulan yang lalu


Satuan untuk menentukan ukuran panjang dan lebar di CSS yang kita kenal ada px, em, %, dan viewport (v).

Artikel kali ini kita akan membedakan antara % dan vh/vw.

Sebagai informasi, vw dan vh mewakili lebar dan tinggi viewport.

Perbedaan antara menggunakan width: 100vw dan width: 100% adalah: pada 100% akan membuat elemen sesuai dengan ruang yang tersedia, lebar area yang memiliki ukuran tertentu, dalam hal ini lebar layar yang tersedia, termasuk margin dokumen.

Jika Anda mengatur style css pada body dengan nilai margin: 0, 100vw akan memiliki berperilaku sama dengan 100%. Viewport beracuan pada ukuran layar, sedangakan % beracuan pada ukuran elemen yang membungkus elemen tersebut.


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456