Teknoloji her zaman olduğu gibi hızla gelişiyor ve bazen teknolojinin içinde olan bizler bile hızına zor yetişiyoruz. Epey zamandır araştırdığım ama hiç talep edilmediği için üstüne düşmediğim konu responsive css… Sıvı gibi her kaba uyan bir tasarım anlamına geliyor birazda.. Çok fazla teoriden bahsetmeyi sevmediğim için direk konuya giriyorum. Günümüzde tabletler, akıllık telefonlar, netbooklar, notebooklar ve tabi ki vazgeçilmezlerden olan masaüstü bilgisayarlar mevcut. Bu durum her ekrana farklı tasarım boyutunda baş edilemez hale geliyor. Bu sebeple css’in @media screen devreye giriyor. Tek css dosyasında çoklu ekran çözünürlüğüne göre görüntünün yansımasını sağlıyor. Bu da tek noktan veri girişi ve kontrolünü kolaylaştırıyor. Ana dizin ve mobil site için 2 defa ayrı ayrı içerik girmek zorunluluğunu ortadan kaldırıyor.

/*——————————[ 996 ]—————————*/
@media screen and (max-width:996px){
/* Buraya yazacağınız css kodu maksimum 996px genişliği olan cihazlarda çalışacaktır. Tabletler için diyebiliriz */
}
/*——————————[ 480 ]—————————*/
@media screen and (max-width:480px){
/* Buraya yazacağınız css kodu maksimum 480px genişliği olan cihazlarda çalışacaktır. */
}
/*——————————[ 320 ]—————————*/
@media screen and (max-width:320px){
/* Buraya yazacağınız css kodu maksimum 320px genişliği olan cihazlarda çalışacaktır. */