Telefonların ve tabletlerin yaygınlaşmasıyla cihazın boyutuna uyum sağlayan – responsive design – web siteleri de gerekli olmaya başladı.

Meta Tags

Telefonların birçoğu girilen internet sitesini daraltır ve ekrana sığdırmaya çalışır. Head etiketleri arasına yazacağımız viewport ile bu özelliği iptal etmemiz gerekiyor.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 ve daha eski sürümleri media query desteği sağlamadığından aşağıdaki kodları da ekleyelim.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML Yapısı

Header, content, sidebar ve footer’dan oluşan basit bir tasarım hazırlayalım.

#pagewrap {width: 960px;margin: 20px auto;}
#header {height: 180px;}
#content {width: 600px;float: left;}
#sidebar {width: 300px;float: right;}
#footer {clear: both;}

Media Qoery

CSS3 Media Query kullanarak tarayıcının sayfayı nasıl görüntüleyeceğine karar vereceğiz. Amacımız siteye girilen cihazın genişliğine göre css kodlaması yapmaktır.

Aşağıdaki kodlar 980px görüntüleyebilecek cihazlar içindir, örneğin monitörleriniz.

/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {width: 94%;}
#content {width: 65%;}
#sidebar {width: 30%;}
}

Tablet gibi cihazlardan girdiğinizde sayfanın genişliğinin otomatik olarak daralması için width:auto kullanılır.

/* for 700px or less */
@media screen and (max-width: 700px) {
#content {width: auto;float: none;}
#sidebar {width: auto;float: none;}
}

Telefon gibi küçük ekranlı cihazlar için aşağıdaki gibi bir kod kullanılır. Burada header yükseklği otomatik olarak ayarlanmıştır ve sidebar alanının görünmemesi sağlanmıştır. Dolayısıyla tabletten ya da monitörden sayfaya giren ziyaretçiler sidebar’ı görebilecekler, fakat telefondan girdiklerinde sidebar gizli olduğu için göremeyecekler.

/* for 480px or less */
@media screen and (max-width: 480px) {
#header {height: auto;}
#sidebar {display: none;}
}

Bu şekilde yazılara ve resimlere de tarayıcıya uygun css düzenlemeleri yapabilirsiniz. Her bir query için yeni stil dosyası oluşturmanıza gerek yok, hepsini tek bir stil dosyası içine yazabilmeniz mümkün.