Web sitelerinin mobil cihazlarla uyumluluğu anlamına gelen responsive tasarım internet sitelerinin tablet, telefon, bilgisayar gibi farklı platformlarda nasıl görünmesi gerektiğini ayarlayabilmemize olanak sağlayan bir tür css yöntemidir.

Nasıl Kullanılır?

/*---------------------------------------[980]--------------------------------------*/

@media screen and (max-width:980 px){

/*Bu bölüme yazdığımız css kodları sadece, ekran çözünürlüğü maximum 980px olan platformlarda çalışır.*/

}

/*---------------------------------------[460]-------------------------------------*/

@media screen and (max-width:300px){

/*Bu bölüme yazdığımız css kodları sadece, ekran çözünürlüğü maximum 460px olan platformlarda çalışır.*/

}

/*---------------------------------------[300]--------------------------------------*/

@media screen and (max-width:300px){

/*Bu bölüme yazdığımız css kodları sadece, ekran çözünürlüğü maximum 300 px olan platformlarda çalışır.*/

}

Anlaşılacağı gibi her platform için ayrı css tanımlamaları ile web tasarım yaparken hazırladığınız sitelerin tüm cihazlarda uyum içinde çalışmasını sağlayabilirsiniz.

Mobil uyumlu site hazırlamak için responsive tasarım kullanınız.