Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut.

CSS stil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz sınıflara , id’lere ya da taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz.

css media query

İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end framework mevcut (Foundation,Bootstrap vb) tavsiyem en yaygın olarak kullanılan Twitter Bootstrap’tır.

İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz.

Şimdi responsive yapı için @media özelliğinin nasıl kullanıldığını aşağıdaki örnekle inceleyelim.

css media sorgusu

Bilgisayar, Tablet ve Telefonlar için kullanılan  CSS Media Sorguları :

Kodları kopyalayıp kendi css dosyanıza ekleyerek kullanabilirsiniz ya da aşağıdaki indir butonuna basarak css dosyasını indirip projenize dahil edebilirsiniz.

css dosyasını indir