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.