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  CSS ile Yazı Arka Planı : text-fill-color

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



  • Mehmet Önder AKSAR

    Hocam teşekkür ederiz çok güzel yazılmış. Fakat ben çok yeni olduğum için sanırım yapamıyorum. Hazır template ile yapmış olduğum web sitemin 14″ den küçük boyutlu diğer cihazlarda da aynı şekilde görünmesini istiyorum. Yani menülerinde falan değişiklik yapmayacağım. Site 14″ , 15″ de nasıl görünüyorsa bir cep telefonunda da öyle görünsün istiyorum. Yardımcı olursanız memnun olurum..İyi çalışmalar..

    • Bildiğiniz gibi piksel ve yüzde olarak değer atayabiliyorsunuz. Sizin yüzde değeri atamanız daha mantıklı. Ama tam istediğiniz oranları öncelikle hesaplamanız gerekmekte.

  • Developer

    Güzel bir yazı daha ellerinize sağlık gerçekten çok yararlı.

  • ErkanKilic

    Merhaba,

    Kendim kodlayarak hazırlamış olduğum websitesinde sadece ana sayfada yer alan bir slider kullanmaktayım.

    Bu slider, standart yükseklikte olan ekranlar için (768px ve altı) ve responsive olarak tablet, cep telefonu gibi cihazlarda sorunsuz çalışmaktadır.

    Bu değerden daha yüksek değere (768px üstü) sahip yükseklikteki ekranlarda slider bitişi ile footer arasında boşluk oluşmaktadır. Bu aradaki boşluğun kalkmasını nasıl sağlayabilirim?

    Şimdiden teşekkürler