Media Query Nedir?
Media Query, CSS içerisinde, HTML Viewport () etiketinden dönen veriyi DOM(*)'un anlık genişliğine göre brakepoint (kırılma noktası) oluşturmamızı sağlayan koddur.
DOM: DOCUMENT OBJECT MODEL (BELGE NESNESİ MODELİ) ANLAMINA GELİR. İLERİKİ KONULARDA DETAYLANDIRILACAKTIR.
Bu sayede ekran genişliğinin ve tiplerinin farklı olduğunu noktalarda tüm nesnelerimizin aldığı sınıf değerlerine ayrı ayrı müdahale edebilmemizi sağlar.
Örnek bir Media Query genellikle aşağıdaki gibidir.
@media only screen and (max-width: 768px) {}
@media , Media Query'mizin tanımlaycısı Örnek görev yapar tarayıcı kodumuzu derlerken ilgili sorgudaki sınıfları viewport ile karşılaştırarak kullanıcıya sunar.
Media Query'ler bir çok parametre alabilir. Bu parametrelere geçmeden önce örnek olarak yazdığımız kodu inceleyelim.
Media Query Tanımlayıcısı: Media Query'nin @media ile başlayan kısmıdır. Bu alan her zaman sabittir ve CSS içerisinde buradan sonra gelen kod bloğunun peşi sıra gelecek olan sorgu doğrultusunda kullanılacağını gösterir.
Birinci Şart (only screen): Minimum bir şart olmak üzere tıpkı if mantıksal sınaması şeklinde yazılır. Yukarıdaki örnekte birinci şartımız cihazın ekranı olan bir cihaz olmasıdır. Ekransız cihaz olamayacağını var saysak da CSS'te web için tanımlayabileceğimiz alan bununla sınırlı değildir.
Media Query'ler sadece ekranı değil diğer çoklu ortam alanlarını da seçmemize yardımcı olur. Örneğin sayfa yazdırılırken biçimlendirmeden dolayı yanlış çıktı alıyorsak yine Media Query'nin print özelliği sayesinde çıktı için özel CSS tanımlamamız mümkündür.
İkinci Şart (mantıksal operatörü + şart iki): İkincil bir şart tanımlayabilmek için öncelikle ve veya veya mantıksal sınayıcılardan bir tanesini kullanmamız gerekir; Eğer ki Media Query'ler if ifadesi gibi ele alıyorsa bu durumda kullanabileceğimiz ve, veya ya da değil ise şeklinde olur. Elbette ki Media Query'ler içerisinde bu üç mantıksal şartın üçü de kullanılabilir. Media Query'ler de bu üç sınama aşağıdaki gibi listelenebilir:
Standart If İfadesinde Media Query'de
and And
or , (virgül)
not not
Şimdi ise örneklerle bu ifadelerin ne anlama geleceğini anlatalım:
<!DOCTYPE html>
<html lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="windows-1254" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Karayel Tasarım Mobil Projesi</title>
<style>
/* İfade Bir */
@media (min-width: 320px) and (max-width: 960px) {
body {
background: red;
}
}
/* İfade iki */
@media only print, (width: 960px) {
body {
background: white;
}
}
/* İfade Üç */
@media not print and (device-width:768px) {
body {
background: black;
}
}
</style>
</head>
<body>
İçeriğim burada.
</body>
</html>
Yukarıda gördüğünüz kod dizininde sizin de gördüğünüz gibi üç adet Mediq Query var. Şimdi bu sorguları detaylı olarak inceleyelim.
Birinci İfade: Eğer ilgili Viewport'dan dönen ekranın o anki genişliği 320 pikselden büyük ve 960 pikselden küçükse, yani bu ciahzın tablet olduğunu var sayarsak, web sitemin ana gövdesinin arka plan rengini kırmızı yap.
İkinci İfade: Eğer Viewport'un belirlediği anlık ortam yazdırma ortamı ise veya genişlik tam olarak 960 piksel ise web sitemin arka plan rengini beyaz yap.
Üçüncü İfade: Eğer Viewport'un belirlediği anlık ortam yazdırma ortamı değilse ve cihaz genişliği 768 piksel ise web site gövdesinin arka plan rengini siyah yap.
Örneklerden de anlaşılabileceği gibi Viewport'dan dönen veriyi sınamamızın ve gruplara ayırmamızın birçok yolu var. Bu avantajımız sayesinde mobil cihazlar için tasarım yaparken istediğimi kırılma noktalarını oluşturup değişik uygulama alanları tanımlayabiliyoruz.
NOT: DEVICE WIDTH İLE DİĞER WIDTH ÖĞELERİ ARASINDA BARİZ BİR FARK VARDIR. DEVICE WIDTH, CİHAZIN HAM OLAN EKRAN GENİŞLİĞİNİ ALIRKEN, DİĞER WIDTH DEĞERİ TARAYCI PENCERESİNİN O ANKİ DEĞERİNİ ALIR. YANİ DAHA AÇIK SÖYLEMEK GEREKİRSE 1920 PİKSEK GENİŞLİĞİNDE MONİTÖRÜMÜZDE DEVICE-WIDTH SÜREKLİ OLARAK 1920 PİKSE DEĞERİNİ ALIRKEN, WIDTH DEĞERİ O ANDA TARAYICININ PENCERE BOYUTUNA GÖRE DEĞİŞKENLİK GÖSTERİR.