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

5 Temmuz 2015

minimalcoding

10793 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.

İlk iş olarak Html dosyamıza diğer yapılarla karışmaması için <head></head> kodları arasına ayrı bir responsive.css dosyası ekleyelim.

Html Kod Yapısı




<link rel="stylesheet" media="screen" href="responsive.css">

Html kodumuza eklemiş olduğumuz responsive.css dosyamızı düzenleme yapımıza geçmeden bilmemiz gereken bazı püf noktaları var. Kullanacak olduğumuz @media sorugusu için bazı matıksal operatörlere ihtiyaç duyabiliriz. bunlara aşağıdaki tablodan ulaşabilirsiniz.

@media Mantıksal Operatörleri

Mantıksal Op.	Açıklama
and	iki veya daha fazla özelliği bir birine bağlar
only	Sadece belirtilmiş koşullar sağlandığında uygulama işlemi gerçekleştirilmesi için kullanılır.
not	Uygulanacak olan değer aralığında bu yapıyı kullanma anlamını taşır.
Birden fazla sorgu	Kullanacak olduğunuz media tiplerinde ortak değerler var ise “,” virgül ile ayırarak aynı işlemi ilgili alanlara ataya bilirsiniz

Şimdi sırasıyla mantıksal operatörlerinin kullanımına bakalım.

– and




@media (min-width:480px) and (max-width:768px){
  body{
    background-color: black;
  }
}

@media (min-width:480px) and (max-width:768px){

body{

background-color: black;

}

Ekran boyutu minumum genişlik 480 pixel ve maksimum genişlik 768 pixel aralğında davranışlarının değişmesini istediğimiz kod blokları için “and” yapısını kullandık.

– only




@media only screen and (max-width: 480px){
  body{
    background-color: black;
  }
}

@media only screen and (max-width: 480px){

body{

background-color: black;

}

Ekran genişliği sadece maksimum genişlik 480 piksel olana kadar davranışlarının değişmesini istediğimiz kod blokları için “only” yapısını kullandık.

– not




@media not screen and (max-width: 480px){
  body{
    background-color: black;
  }
}

@media not screen and (max-width: 480px){

body{

background-color: black;

}

Ekran genişliği maksimum genişlik 480 piksel dışında kalan alanlarda davranışlarının değişmesini istediğimiz kod blokları için “not” yapısını kullandık.

– Birden fazla sorgu




@media only screen and(max-width: 480px), print{

  p{
    color: green;
  }

}

@media only screen and(max-width: 480px), print{

color: green;

}

Daha önceki yazılarımızda bir @media tipi olan print yapısından bahsetmiştik.(@meida print için tıklayınız) Yukarıda ki kullanıma baktığımızda ekran genişliği maksimum 480 piksele kadar p tagının rengini yeşil yap aynı zamanda çıktı alınacak olan yazının da p yapısının rengini yeşil yap demiş olduk iki farklı media tipi için ortak kullanım yapılarını “,” virgül ile ayırarak gruplamış olduk.

Şimdi sık kullanılan medya özelliklerinden bahsedelim.

Medya Özellikleri

Değer	Açıklama
aspect-ratio	Genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler
device-aspect-ratio	Genişlik ve cihazın yüksekliği arasındaki oranını belirtir
device-height	İlgili cihazın, yüksekliğini belirtir
device-width	İlgili cihazın,genişliğini belirtir
height	Yükselik yapısı için kullanılır
width	Genişlik yapısı için kullanılır
max-device-aspect-ratio	Genişlik ve cihazın yüksekliği arasındaki maksimum oranı belirler
min-device-aspect-ratio	Genişlik ve cihazın yüksekliği arasındaki minimum oranı belirler
max-device-height	Cihazın, maksimum yüksekliğini belirtir
max-device-width	Cihazın, maksimum genişliğini belirtir
min-device-height	Cihazın, minimum yüksekliğini belirtir
min-device-width	Cihazın, minimum genişliğini belirtir
min-width	Ekranın, minimum genişliğini belirtir
min-height	Ekranın, minimum yüksekliğini belirtir
max-height	Ekranın, maksimum yükseliğini belirtir
max-height	Ekranın, minimum genişliğini belirtir

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

Html Kod Yapısı

@media Mantıksal Operatörleri

– and

– only

– not

– Birden fazla sorgu

Medya Özellikleri

Yorum yap