css media queries

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

reklam alanı

Yorum Yap

Lütfen Yorumunuzu Yazın
Lütfen adınızı yazın