CSS3 Viewport Birimleri - Duyarlı Tasarım İçin Yeni Birimler

Yüzdelerle belirtilen değerleri kullanarak, Değişik boyutta görüntüleme ekranların genişliğine ve yüksekliğine uyum sağlayabilecek web tasarımları oluşturmak oldukça kolaydır. Akıllı telefonlar ve mobil cihazların giderek daha fazla kullanıcısı haline geldikçe, ekran boyutlarına göre tasarımın önemi artmakta. Resimlerin ,Yazıların, kutuların veya başka HTML öğelerin uyum sağlayabilmesi çok önemli.

Yüzde değerleri kullanmak her zaman en iyi boyutlandırma seçeneği değildir. Yazı tiplerinin boyutunu düşünün. Yazı tipi boyutu, tarayıcı penceresinin genişliğindeki değişikliklere yanıt verecek şekilde yüzde olarakda belirlenemez. CSS3 bize bu sorunu aşmaya yardımcı olan yeni değişim birimlerini tanıtıyor.

İlk başta Görüş alanını belirleyip sonra sayfa boyutu değiştiğinde buna göre hareket eden CSS3 yeni birimleri vardır. Kullanıcı tarayıcının penceresinin boyutu ile oynadığında hesaplamalar tekrar yapılır. vw, vh, vmin ve vmax değerleri görüş alanına göre göreceli değerlerdir.

• vw: Görünüm genişliği %1
• vh: Görünüm yüksekliği %1
• vmin: En küçük tarafın %1
• vmax: En büyük tarafın %1

Daha esnek boyutlandırma için vieport Birimleri

vw ve vh birimleri , pencere boyutuna göre genişliği / yüksekliği tanımlar. Genişliği belirtmek için vw, yükseklik için vh değerini kullanırız. Bu sözde görünüm birimleri, tarayıcı penceresinin geçerli boyutuna göre boyutlar belirlememize izin verir.

vh: viewport-height (görüş alanı yüksekliği) = Grafik penceresinin yüksekliği.

vw: viewport-width (görüş alanı genişliği) = Grafik penceresinin genişliği.

Değerler yüzde olarak ifade edilir (0 ile 100 arasında değer alır). Örnekler:

width:100vw;
height:40vh;
font-size:3vh	

width:100vw; (grafik penceresinin genişliği: % 100'ünün genişliği)

height:40vh; (grafik penceresinin yüksekliği: % 40'nın yüksekliği)

font-size:3vh; (grafik penceresinin % 3 yüksekliğinde font yüksekliği)

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 1600x1200 olduğunu düşünürsek; 2x1600/100 = 32px boyutunda katman elde ediyoruz. Eğer 100 vw verseydik 1600 piksel genişlik elde ederiz.

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

Yukarıdaki örnekte yine aynı ekranda 1600x1600px’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. Ekran çözünürlüğünüz 1600×1200 ise, Bu ölçünün width değilde height olan kısmını baz alıyoruz demektir. Bu durumda 100 vh, 1200 piksele eşit olacaktır.

div { max-height: 50vh; }	
	

Yukarda ki örnekte ise katman boyutu maximum yarım ekran yüksekliğinde olacak. 1600x1200 pixsel ekranda Height değeri 1200px bunun yarısı olacak.

Vieport Birimleri ile Esnek Boyutlandırma

vw ve vh birimleri , pencere boyutuna göre genişliği / yüksekliği tanımlar. Genişliği belirtmek için vw, yükseklik için vh değerini kullanırız. Bu sözde görünüm birimleri, tarayıcı penceresinin geçerli boyutuna göre boyutlar belirlememize izin verir. Yüksekliği ekranı kaplayan genişliği ekranın %50 olan yeşil bir kutu oluşturalım.

div {
  width: 50vw;
  height: 100vh;
  background:green;
}    

Yüzdeler her zaman ana öğenin boyutuna etki ederken, bu birimler pencerenin boyutuna göre değişir. Genişliği göreceli olarak yüksekliği belirleme özelliğine bile sahibiz.

div {
  width: 50vw;
  height: 100vw;
  background:green;
}
    

Yazı tipi boyutunu yeni birimlerle ayarlayın

Sayfada okunabilir yazı tiplerini tutmak istiyorsanız, o zaman sitenin görüntülendiği cihaza bakmaksızın doğru boyutların kullanıldığından emin olmalısınız. Büyük başlıklara özel dikkat gösterilmelidir. Yazı tipi boyutunu tarayıcı penceresinin genişliğine göre ayarlamak için görünüm birimi kullanın.

h1 {
  font-size: 10vw;
}	

ÇIKTI:

Viewport Minimum (vmin)

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

Örneğin, tarayıcı sırasıyla 700px ve 1100px yüksekliğe ve genişliğe sahipse, sırasıyla 1vmin = 7px, 1vmax = 11px, yükseklik ve genişlik sırasıyla 1080px ve 800px ise, 1vmin = 8px, 1vmax = 10.8px olur.

Cep telefonlarda dikey ve yatay telefonu tutuğumuzda 1vmin = 1vw veya 1vh hangisi küçük ise ona eşdeğerdir.

Bir kutu öğesinin ekranda görünmesini sağlarsak. Vmin birimini yüksekliği ve genişliği için kullanıp, 100'ün altında bir değer verdiğiniz sürece, bunu yapabiliriz. Örneğin, en az iki tarafı ekrana değen bir kare tanımlayabilirsiniz:

.box {
    height: 100vmin;
    width: 100vmin;
    background:orange; 
}	
	

ÇIKTI:

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.

Cep telefonlarda dikey ve yatay telefonu tutuğumuzda 1vmax = 1vw veya 1vh hangisi büyük ise ona eşdeğer

Görüş Alanı değerleri ekranın satır uzunluğunu okunabilir seviyede tutmamıza olanak sağlar. Metinlerin ekrana, farklı elementlerde optimum sığmasına olanak sağlarlar.

ÖRNEK: Yukarıda ki kutu öğesini tam ekran kaplatırsak:

 .box {
    height: 100vmax;
    width: 100vmax;
    background:orange; 
}	
	

ÇIKTI:

Tarayıcı Desteği

260

Gönder