CSS3 @Media

CSS3 Media QueriesCSS2, farklı ekran çözünürlükleri için farklı stylesheet atamamızı sağlıyordu. CSS3 ise media sorgulamaları sayesinde tüm bu işlemleri tek dosyada yapmamızı sağlıyor.

CSS3 media sorgulamaları sayesinde her tip ekran çözünürlüğü için tasarımlar oluşturabiliyoruz. Özellikle sayfalarınıza mobil sürüm hazırlarken kullanabileceğiniz media etiketi web tasarımınıda yeni bir devrin başlamasına sebep oldu.

Makalemizin devamında media sorgularını örneklendireceğiz, tanıyacağız ve bu teknik ile hazırlanmış birkaç web sayfası paylaşacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 Medya Sorguları

Öncelikle sizler için hazırladığımız örneği görüntüleyerek işleme başlayabilirsiniz.

Örnekteki şekil

  1. 600’den küçük ekran genişliğinde üçgene,
  2. 600 ile 1200 arası ekran genişliğinde kareye,
  3. 1200’den büyük ekran genişliğinde daireye

dönüşecektir.

Max Width

Bu alandaki CSS kodları maksimum x ekran çözünürlüğüne göre kullanılır. Aşağıdaki tanımlama 900 pikselden küçük ekran genişliklerinde bütün yazıları kırmızı renge dönüştürür.

@media screen and (max-width: 900px) {
  body{color:red;}
}

Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.

<link rel="stylesheet" media="screen and (max-width: 900px)" href="style.css" />

Min Width

Bu alandaki CSS kodları ise x rakamından büyük ekran çözünürlüklerinde kullanılır. Aşağıdaki tanımlama 900 pikselden büyük ekran genişliklerinde bütün yazıları mevi renge dönüşürür.

@media screen and (min-width: 900px) {
  body{color:blue;}
}

Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="style.css" />

Çoklu media sorgulaması

Çoklu media sorgulamalarını aralıklar için tasarım oluştururken kullanıyoruz. Örnek vermek gerekirse :

Aşağıdaki sorgu 900 ile 1200 piksel arasındaki çözünürlüklerde site arka planını yeşil yapacaktır.

@media screen and (min-width: 900px) and (max-width: 1200px) {
  body {background: green;}
}

max-device-width ve max-device-height kullanımları

CSS3’ün media sorgulamaları sırasında aklınızda oluşabilecek en büyük soru max-device-width ile max-width arasındaki farkın ne olduğudur. Device kullanımı tahmin edebileceğiniz gibi mobil cihazlara odaklıdır.

  1. max-width görüntüleyici cihazın kullandığı tarayıcının ekran genişliğidir. Tablet kullanımlarında Chrome ile sitenizi görüntüleyen ziyaretçi, eğer Chrome’un genişliğini daraltırsa bu tanımladan etkilenir.
  2. max-device-width ise tarayı boyutlandırması değil, tasarımı görüntüleyen cihazın maksimum ekran genişliğine göre hareket eder. Örneğin max-device-width:480 tanımlaması iPhone görüntü tipidir.
Bu da ilginizi çekebilir  Responsive HTML5

Örnek

Sitemizin tasarımı üzerinde hala değişiklikler olmaktadır. Fakat varsayılan haliyle bile CSS3’ün media sorgularına güzel bir örnek teşkil etmektedir.

CSS3 Media Queries

CSS3 media sorgulamalarını etkili şekilde kullanan Smashing Magazine‘ini unutmamak gerek.