CSS Dersleri 50 - Media Query Kullanımı

CSS Dersleri 50 - Media Query Kullanımı


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
print 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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla