Responsive Web Site Nasıl Yapılır?
Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra kısaca kodları verip nerede kullanıldığını yazacağım
Genel Mantık
@media only screen and (max-width: 960px) { }
Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her css kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.
Class adı “hibestil” olan bir div’imiz olsun (
) ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil div’i 960px’den küçük çözünürlüklerde görünmeyecektir.
@media only screen and (max-width: 960px) {
.hibestil{display:none;}
}
Bu şekilde herhangi bir Div’in arkaplan rengini, boyutunu ve bir çok özelliğini değiştirebiliriz.
@media only screen and (max-width: 960px) {
.hibestil{background:#fff;color:#000;width:100%;}
}
Çözünürlükler için kodlar
960px den düşük çözünürlüklerde:
@media only screen and (max-width: 960px) { }
801px ve 959px arasındaki çözünürlüklerde:
@media only screen and (min-width: 801px) and (max-width: 959px) { }
800px den düşük tüm çözünürlüklerde:
@media only screen and (max-width: 800px) { }
480px ve 759px arasındaki çözünürlüklerde:
@media only screen and (min-width: 480px) and (max-width: 759px) {}
479px den düşük tüm çözünürlüklerde:
@media only screen and (max-width: 479px) { }
Son Olarak
Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:
Sitenizin Css kodlarında bu şekilde ekleme ve düzelmeler yaptığınızda tüm çözünürlüklere uygun hale gelecektir.Umarım yararım dokunmuştur.
