5 Temmuz 2015
minimalcoding
10902 0

CSS Responsive Media Query Nedir? Nasıl Kullanılır?

Artık günümüz teknolojisinde yaygın olarak kullanılan mobil cihazlar (Akıllı telefonlar, Tabletler vb.) internet erişimi sağlamsıyla birlikte kullanıcıların siteyi daha rahat dolaşabilmeleri için farklı ekran çözünürlüklerinde web sayfalarının, farklı görüntüleme modellerinin oluşması ihtiyacını doğurdu. Ülkemizde ve Dünyada en çok kullanılan arama motoru olan Google geçtiğimiz ay tüm iltişim kanallarından  responsive (mobil duyarlılık ) özelliğini üst sıralara çıkma kriteri olarak baz alacağını duyurdu. Yani responsive design artık olmazsa olmazlar arasında yer aldı. Peki oluşturulan web sitelerini mobil duyarlı hale nasıl getireceğiz? 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 sitil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz. İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end frameowrkü mevcut (Foundation,Bootstrap vb) bizim tavsiyemiz 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 resposnive yapı için @media özelliğinin nasıl kullanıldığını örneklerle inceleyelim.  Devamı

Devamı