Bu yazımızda css ile sitemizi nasıl duyarlı - her çözünürlüğe uygun ,tabletlere akıllı telefonlara göre şekillenen tasarım yapabileceğimizi anlatmaya çalışacağım.

tasarım yapmaya başlamadan önce sitenizin duyarlı olmasını istiyorsanız internette bulunan hazır iskelet sistemlerini kullanabilirsiniz.bu iş için genelde 960 grid ,yani maximum 960 piksel genişleyebilen sistem kullanılır
Eğer tasarımı yapılmış bir siteyi responsive yapmak istiyorsanız ,bu iş de oldukça basit.css'ye ekran çözünürlüğü değiştiğinde yapması gerekenleri söyleyeceğiz.aşağıdaki 3 css kodu ,en çok kullanılan tablet ve akıllı telefonların çözünürlüğüdür.

Kod:
@media only screen and (max-width:1230px) and (min-width:990px){
 }
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}


İlk olarak css sayfanızı dahil ettiğiniz yeri bulup ,sözdizimine media="all" özelliğini eklemelisiniz yani ;




<link rel="stylesheet" type="text/css" media="all" href="cssniz" />


 şekline çevirmelisiniz.Ardından sitenizin hangi çözünürlüğe uymasını istiyorsanız o aralığı aşağıdaki kodlarda olduğu gibi max-width (çözünürlük bu genişlikten aşağısı ve) min-width (bu çözünürlükten de yukarısı arasında çalışacaktır) yazmalısınız.Aralığınızı belirledikten sonra hangi kutunun ,mesajın,resmin,yazının küçülmesini istiyorsanız gerçekleştirebilirsiniz.
Örneğin sitemiz yaklaşık 10 çözünürlüğe göre şekillenir ve tarayıcı genişliğine göre


@media only screen and (max-width:1230px) and (min-width:990px){
    img{width:50%;height:auto}
    .birincikutu{border:1px solid red;}
    .ikincikutu{background-color:white}
    p.herhangibiryazi{font-size:12px} }
}




içeriği taşırmayacak şekilde pozisyon alır.Aşağıda emsal teşkil etmesi açısından birşeyler yazdım.genişlik 1220'den küçük - 990'dan büyük olunca kodlar çalışacak