CSS3 ile Ekrana Göre Boyutlandırma

Web sitemiz için sayfalar hazırlarken sıklıkla karşılaştığımız bir sorun var; Yazılarımızın farklı ekran boyutlarında farklı boyutta görünmesi ve oturttuğumuz düzene her ekran boyutunda uymaması. Bu soruna CSS3 ile bir çözüm getirildi; "vw, vh ve vmin"

Genelde en son yazılanı ben ilk yazayım; Tarayıcı Desteği:

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ tarayıcıları bu özelliği tam olarak destekliyor.
Chrome 20-34 arası ve Safari 6'da ise bazı sorunlar mevcut.

Neden Gerekli?

Örneğin sayfanızda bir bölüm için hazırladığınız belirli uzunlukta sabit bir yazınız var. Sayfanızın da yeni trende uygun olarak Responsive olduğunu düşünürsek, yazınız her çözünürlükte farklı satır sayısına sahip olacak ve belkide sayfanızın görünümünü istemediğiniz bir hale getirecek. Yazınızın ne olursa olsun sayfa içinde tüm çözünürlüklerde aynı şekilde görünmesi için bu yeni boyutlandırma değerlerini kullanmak gerekiyor. Maalesef "px", "em" ve "%" kullanarak bu istediğimizi yapamıyoruz.

Mantığı Nedir? Nasıl Çalışıyor?

Her üç birim de görünümün %1'ine denk gelecek şekilde ayarlanmış. "Viewport" == "tarayıcı pencere genişliği" ise ve örneğin pencere genişliği 50cm ise, 1vw = 50/100 = 0.5cm ye denk gelir.

1vw = Viewport genişliğinin %1'i
1vh = Viewport yüksekliğinin %1'i
1vmin = 1vw veya 1vh, hangisi daha küçükse onu baz alır
1vmax = 1vw veya 1vh, hangisi daha büyükse onu baz alır

Kullanımı

p {
  font-size: 4vw;
}
h1 {
  font-size: 5vh;
}
h2 {
  font-size: 6vmin;
}

Önizleme

TAM OLARAK BURAYA tıklarsanız kodun nasıl çalıştığını görebilir ve deneyebilirsiniz.

 

Okuduğunuz için teşekkür ederim, faydalı olduysa ne mutlu bana :)



Yorumlar

Twitter'da Ben!

Yükleniyor...