Duyarlı web tasarımı (Responsive), tüm cihazlarda uygun bir formda görünen web sayfaları oluşturmakla ilgilidir. Web sitelerimizi tasarlarken, tema dahil siteye dahil olan unsurların her cihaza uyumlu olmasına önem göstermeliyiz. Bu yazımızda sizlere html responsive hakkında bilmeniz gerekenleri anlatacağım.
Duyarlı bir web sitesi oluşturmak için aşağıdaki <meta> etiketini tüm web sayfalarınıza eklemelisiniz:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Ekleyeceğiniz bu kod, sayfanızın görüntü alanını ayarlayacak ve tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceği konusunda talimatlar verecektir.
Meta etiketinin desteklediği öznitelikler bulunmaktadır:
width | Cihazın sanal görüntü genişliğini ayarlar. |
device-width | Cihazın fiziksel görüntü genişliğini ayarlar. |
height | Cihazın sanal görüntü yüksekliğini ayarlar. |
device-height | Cihazın fiziksel görüntü yüksekliğini ayarlar. |
initial-scale | Sayfaya ilk kez girerken oluşacak yakınlaşma değeri. |
minimum-scale | Ziyaretçinin sayfada yakınlaştırabileceği minimum miktar. 1.0 yakınlaştırmaz. |
maximum-scale | Ziyaretçinin sayfada yakınlaştırabileceği maksimum miktar. 1.0 yakınlaştırmaz. |
user-scalable | Cihazın yakınlaştırıp uzaklaştırmasına izin verir. Değerler: evet veya hayır. |
Tarayıcı genişliğine bağlı olarak farklı görüntüler göstermek istersek, picture etiketiyle bunu yapabiliriz. Şuan tam ekran bir şekilde okuyorsanız başka bir resim göreceksiniz. Tarayıcı pencerenizi küçültürseniz başka bir resim göreceksiniz.
1 2 3 4 5 6 | <picture> <source srcset="resim adresi 1" media="(max-width: 500px)"> <source srcset="resim adresi 2" media="(max-width: 1500px)"> <source srcset="resim adresi 2"> <img src="resim adresi2"> </picture> |
Metin boyutu, “görüntü alanı genişliği” anlamına gelen “viewport width” “vw” birimi ile ayarlanabilir.
1 2 3 4 5 | <h1 style="font-size:10vw;">Kod Kampüsü</h1> <h1 style="font-size:5vw;">Kod Kampüsü</h1> <h1 style="font-size:2vw;">Kod Kampüsü</h1> |
