Udah lama gak ngoprek CSS dan gak nge-blog juga. Padahal baru kemarin nulis di blog. Sekarang bahas apa? Bahas CSS unit aja. Udah tau satuan px (pixel) kan? Sekarang mari bahas satuan vw dan vh atau satuan viewport dari CSS3. Sebenernya udah ada sejak lama, tapi baru dipake kemaren -_-"

Konsep dari vw dan vh itu adalah: mewakili persentase dari tampilan lebar dan tinggi browser. Jadi, kalau kita memasukan value 80vw, artinya lebar dari elemen tersebut sama dengan 80% dari lebar window browser, yang vh juga sama, bedanya dia representasi dari tinggi window browser.

1vw = 1/100 (1%) dari lebar window browser

10vw = 10/100 (10%) dari lebar window browser

50vh = 50/100 (50%) dari tinggi window browser

Apa bedanya dengan satuan persen?

Beda dari satuan persen (%) adalah, satuan persen mengacu pada inheritance dari parent, atau diukur berdasarkan lebar / tinggi dari parent. Misal, tag header memiliki lebar 800px, maka tag apapun yang ada di dalam header akan memiliki persentase dari 800px.

Sekarang, apa bedanya dengan em?

em biasa digunakan untuk font, nilai yang digunakan adalah "bagaimana browser atau device menampilkan ukuran font secara native, pendeknya ukuran font ditentukan oleh browser atau device itu sendiri."

Kalau masih kurang mudeng, silakan simak demo dibawah dan coba resize lebar dari browser

Atau buka link ini http://codepen.io/sendz/full/cbDpf untuk lihat hasil dengan full-size.
[codepen_embed height="259" theme_id="0" slug_hash="cbDpf" default_tab="css" user="sendz"]
.container {
width: 800px;
background-color: #333;
padding: 5px;
margin: 10px 0px;
}

.title-wrapper-persen {
background-color: #555;
width: 80%;
}

.title-wrapper-viewport {
background: #ddd;
width: 80vw;
}

See the Pen cbDpf by Sendy Aditya Suryana (@sendz) on CodePen.
[/codepen_embed]

Judulnya ngehek? Iya, padahal itu px gak bisa ditinggalin gitu aja :D