Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Media Query Kullanımı Konusunu öğreneceğiz.
CSS2'de tanımlanan @media kuralı, farklı ortamlar için stil tanımlamayı hayatımıza getirdi. Mesela bilgisayarlar için ayrı stiller, yazıcılar için ayrı stiller veya televizyonlar için ayrı stiller tanımlayabiliyorduk. Ama bu yöntem çok fazla destek görmedi.
CSS3'teki media queryler, CSS2 @media kuralı fikrini genişletti: Önceden cihaz türlerine göre stil yazılırken, artık ekranın genişliğine göre stiller yazılabiliyor. Bu sayede aygıtlardan bağımsız olarak Responsive tasarımlar gerçekleştirilebiliyor.
Media Query'ler, aşağıdakiler gibi birçok şekilde stilleri kontrol etmek için kullanılabilir:
- Görünen alanın alanının genişliği ve yüksekliği
- Cihazın genişliği ve yüksekliği
- Yön (tablet/telefon yatay mı yoksa dikey modda mı?)
- Çözünürlük
Media Query kullanmak, masaüstü bilgisayarlara, dizüstü bilgisayarlara, tabletlere ve cep telefonlarına (iPhone, Android vb.) uyarlanmış bir stil sayfası sunmak için popüler bir tekniktir.
Media Query Nasıl Kullanılır ?
Media query sözdizimi, ortam türünden (media type) oluşur ve doğru veya yanlış olarak çözümlenen bir veya daha fazla ifade içerebilir.
@media not|only mediatype and (kosul) {
code....
}
Belirtilen ortam türü, belgenin görüntülendiği aygıt türüyle eşleşiyorsa ve media query'deki tüm ifadeler doğruysa, sorgunun sonucu doğrudur. Bir media query doğru olduğunda, normal basamaklı kurallar izlenerek ilgili stil sayfası veya stil kuralları uygulanır.
Değil (not) veya yalnızca (only) operatörlerini kullanmadığınız sürece, ortam türü isteğe bağlıdır ve tüm türler ima edilir.
Farklı ortamlar için farklı stil sayfalarınız da olabilir:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="style.css">
CSS3 Medya Türleri (Media Types)
| Değer | Açıklama |
|---|---|
| all | Tüm medya tipi cihazlar için kullanılır |
| Sadece printerlar için kullanılır | |
| screen | Bilgisayar ekranları, tabletler, akıllı telefonlar vb. için kullanılır. |
| speech | Sayfayı yüksek sesle "okuyan" ekran okuyucular için kullanılır |
Media Query Örneği
Media query kullanmanın bir yolu, stil sayfanızın içinde alternatif bir CSS bölümü eklemektir.
Aşağıdaki örnek, görüntü genişliği 480 piksel genişliğinde veya daha geniş ekranlarda, arka plan rengini açık yeşil olarak değiştirir (görüntü genişliği 480 pikselden azsa, arka plan rengi pembe olur):
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Etkisini görmek için tarayıcı penceresini yeniden boyutlandırın!</h1>
<p>Medya sorgusu yalnızca medya türü ekran ise ve görünüm alanı 480 piksel veya daha genişse uygulanır.</p>
</body>
</html>
Aşağıdaki örnekte ise, görüntü genişliği 480 piksel genişliğinde veya daha büyükse sayfanın solunda kayan bir menüyü gösterir (görüntü genişliği 480 pikselden azsa, menü içeriğin üstünde olacaktır):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Etkisini görmek için tarayıcı penceresini yeniden boyutlandırın!</h1>
<p>Bu örnek, görünüm alanı 480 piksel genişliğinde veya daha genişse sayfanın soluna kayan bir menüyü gösterir. Görünüm alanı 480 pikselden azsa, menü içeriğin üstünde olacaktır.</p>
</div>
</div>
</body>
</html>
