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.

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.


css viewport units

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


css viewport units

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:


css viewport units

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:


css viewport units

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:


css viewport units

Tarayıcı Desteği


css viewport units
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6513

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.