CSS3 Viewport (vw, vh, vmin, vmax) Birimleri - Sinan Yorulmaz

Sinan Yorulmaz


Bir Yazılımcının Günlüğü

13 Nisan 2017
CSS3 Viewport (vw, vh, vmin, vmax) Birimleri

CSS3
13 Nisan 2017 CSS/CSS3 1.229 Okuma Yorum Yok

Mobil teknolojilerin gelişmesiyle birlikte hazırladığımız tasarımların hangi platformlarda hangi çözünürlüklerde görüntüleneceğini ön görememeye başladık. Belki bir televizyonda, belki bir tablette, belki de bir akıllı telefonda… Her biri için farklı çözünürlükler olduğunu bildiğimize göre, göreceli bir değere bağlı çalışan değerler kullanmak daha mantıklı olacaktır. Bu anlamda responsive tasarımlar ön plana çıktı ve genelde % (yüzde) şeklinde kullanılan genişlik veya yükseklikler kullanılmaya başlandı. Fakat yüzdeli değerler de bu alandaki açığı yeterinde kapatamadı. Bundan dolayı yeni değerler ortaya çıktı ve bunlara da Viewport (Bakış Alanı) birimleri denildi. Şimdi sizlere Viewport birimlerinden olan vw, vh, vmin ve vmax‘den kısaca bahsetmek istiyorum.

Viewport Width (vw)

Viewport’tan kısaltma olarak “v” alan ve genişlik anlamına gelen “w” ile de birleşince “vw” olmuş olan ölçü birimi (bunu neden açıkladım bilmiyorum), yataydaki ekran boyutunun 100/1’ine denk geliyor. Şimdi diyelim ki şöyle bir genişlik verdik:

Ekran çözünürlüğünüzün 1920×1080 piksel olduğunu düşünürsek 1×1920/100 formülünden yola çıkarak 1 vw’lik değerin 19,2 piksele eşit olduğunu görebiliriz. Eğer 100 vw verseydik 1920 piksel genişliğinde bir sonuçla karşılaşacaktık.

Ayrıca şunu da belirteyim, vw diye sadece width değerine vereceğiz diye bir şey yok, bu sadece bir ölçü birimi. Ben şu şekilde de kullanabilirdim:

Bu zamanda da ekran genişliğim olan 1920 pikseli baz alarak 1920×1920 şeklinde bir kare ile karşılaşacaktım.

Viewport Height (vh)

“vh” ölçü birimi ise ekran yüksekliğinin 100/1’ine denk geliyor. Yani az önceki örnekteki aynı hesaplamalar bunun içinde geçerli. Ekran çözünürlüğünüz 1920×1080 ise, bunun width değilde height olan kısmını baz alıyorsunuz demek. Bu durumda 100 vh, 1080 piksele eşit olacaktır.

Gördüğünüz gibi bu örnekte 100 vw ve 100 vh değerlerini kullanarak bir DIV oluşturdum. Oluşturduğum DIV ekran çözünürlüğümle aynı boyutta olacaktır. Çünkü genişlik olarak vw’i, yükseklik olarak da vh’i kullandım ve bunun sonucunda da  1920×1080 bir DIV elde edeceğim.

Viewport Minimum (vmin)

Ekranımızın kısa olan kısmının 100/1’ine denk geliyor. Yani 1920×1080 piksellik bir ekran çözünürlüğünün kısa olan kısmını baz alırsak bu 1080 piksel olacaktır. Bu durumda 100 vmin aslında 100 vh’e eşit oluyor.

Viewport Maximum (vmax)

Bu ölçü birimi de vmin’in tam tersi olarak, ekran çözünürlüğümüzün uzun olan kısmını baz alıyor. Yine 1920×1080 piksellik bir çözünürlükten örnek verecek olursak, 100 vmax’da 100 vw’e eşit oluyor.

Yorum Yap

Copyright © 2015~2017. Tüm haklarım anneme aittir. Babama yakalanmadığınız sürece sorun yok!