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.

@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 ;

ş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 ,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.

@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} }
}

Bir daha ki yazımda Allah izin verirse Jquery ile responsive yapmayı anlatacağım