CSS Yeni Viewport (vw, vh, vmin) Birimleri

Batuhan Göksu
2 min readFeb 22, 2014

CSS Values and Units Module Level 3 ile CSS’de alışkın olmadığımız tarzda birim türlerini görüyoruz. Örnek olarak; milisecond,radian,frequency, resolution… Bu yazıda hayatımıza giren vw, vh, vmin birimlerini anlatmaya çalışacağım

Eskiden arayüzlerimizi 800x600, 1024x768 çözünürlüklerini düşünerek yapıyorduk ki zaten 960 Grid System zamanın en önemli çözümüydü. Şu anda ise ekran boyutları çok çeşitli hale geldi. Bu yüzden arayüzümüzün nerede kullanılacağını çoğunlukla öngöremiyoruz. Bilgisayarlar, telefonlar, tabletler, televizyonlar ve hayatımıza yeni yeni girmeye başlayan saatler ve gözlükler. Bu yüzden de responsive (duyarlı) tasarımlar önem kazandı.

Son zamanlara kadar CSS bu açığı yeterince kapatmıyordu. Gerek elimizdeki yerleşim modeli gerekse birimler yeterli olgunlukta olmadığı için bu yeni ölçü birimleri oluşmaya başladı ve sanıyorum ki bu konuda ki açığı büyük ölçüde kapatacak gibi görünüyor. Şimdi konumuza dönelim ve nasıl olduğunu sizlere aşağıda anlatmaya çalıştım.

Viewport Width (vw)

vw birimi, yataydaki ekran boyutunun 100/1'ine denk gelen bir ölçü birimi.

div { width: 2vw; }

Ekran çözünürlüğümüzün 1280x800 olduğunu düşünürsek;
2x1280/100 = 25,6px boyutunda katman elde ediyoruz.

div { width: 100vw; height: 100vw; }

Yine aynı ekranda 1280x1280px’lik kare bir boyut elde ediyoruz.

Viewport Height (vh)

vh ise ekran yüksekliğinin 100/1'lik bir bölümüne denk geliyor.

div { max-height: 50vh; }

Bu örneğimiz ise katman boyutu maximum yarım ekran yüksekliğinde olacak.

Viewport Minimum (vmin)

Ekranın kısa olan kısmının 100/1'lik büyüklüğüne denk geliyor. 1280x800 çözünürlükteki ekranımızı düşünürsek; 1vh boyutuna eşit oluyor.

Dikey oryantasyondaki bir telefon için düşünürsek baz boyut genişlik oluyor. Şöyle ki 640x1136 (iphone) boyutu için; 1 vmin = 1x640/100 = 6,4px = 1vw oluyor.

Viewport Maximum (vmax)

vmin’in tam tersi olarak, geniş olan hangi uzunluk ise onun 100/1'ine eşit oluyor. Şöyle ki 1280x800 çözünürlükteki ekranda 1vw,640x1136 ekranımızda da 1vh oluyor.

--

--

Batuhan Göksu
Batuhan Göksu

Written by Batuhan Göksu

UI/UX Designer and Coder in javascript, css, html; math for fun.

Responses (2)