CSS'te Medya Sorguları (Media Queries) ile Responsive Tasarım

eminbasbayan

4 dk okuma

CSS'te Medya Sorguları (Media Queries) ile Responsive Tasarım

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Günümüzde web siteleri farklı ekran boyutlarına uyum sağlamalıdır. Bir web sitesinin hem masaüstü bilgisayarlarda hem de mobil cihazlarda düzgün görünmesini sağlamak için responsive (duyarlı) tasarım kullanılır. Responsive tasarımın en önemli araçlarından biri medya sorgularıdır (media queries).

TEXT?

Bu yazıda medya sorgularının ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu basit örneklerle açıklayacağız.

Medya Sorguları Nedir?

Medya sorguları, CSS’in sunduğu bir özellik olup, belirli koşullara bağlı olarak sayfa stillerini değiştirmemize olanak tanır. Bu koşullar genellikle ekran genişliği, ekran yüksekliği, cihaz yönü (landscape veya portrait) gibi faktörlerdir.

Örneğin, bir web sitesinde bir başlığı büyük ekranlarda mavi, küçük ekranlarda kırmızı yapmak istiyorsak medya sorgularını kullanabiliriz.

Medya sorgularını yazarken @media ifadesi kullanılır. Örneğin:

@media (max-width: 600px) {
    h1 {
        color: red;
    }
}

Bu kod, ekran genişliği 600 pikselden küçük olduğunda h1 başlığının rengini kırmızı yapar.

Medya Sorgularının Kullanım Alanları

Medya sorguları ile şunları yapabiliriz:

Öğelerin görünümünü değiştirme: Yazı boyutlarını, renkleri, kenar boşluklarını değiştirebiliriz.
Öğeleri gizleme veya gösterme: Belirli ekran boyutlarında bazı öğeleri gizleyebilir veya gösterebiliriz.
Yerleşimi değiştirme: Örneğin, masaüstünde yatay olan bir menüyü mobilde dikey hale getirebiliriz.
Duyarlı tasarım oluşturma: Sayfanın farklı cihazlarda daha iyi görünmesini sağlayabiliriz.

Medya Sorgularını Kullanma

Medya sorgularını kullanırken üç temel yöntem vardır:

1. Tam Genişlik Belirtme (Kesin Piksel Değeri ile)

@media (width: 800px) {
    h1 {
        color: purple;
    }
}

Bu kod, ekran genişliği tam olarak 800 piksel olduğunda başlığın rengini mor yapar. Ancak, tam genişlik belirleme genellikle kullanılmaz, çünkü ekran genişlikleri sürekli değişir.

2. Minimum Genişlik (min-width) Kullanımı

@media (min-width: 800px) {
    h1 {
        color: purple;
    }
}

Bu medya sorgusu, ekran genişliği 800 piksel ve daha büyük olduğunda başlık rengini mor yapar. Bu, genellikle masaüstü cihazlara yönelik tasarımlarda kullanılır.

3. Maksimum Genişlik (max-width) Kullanımı

@media (max-width: 800px) {
    h1 {
        color: purple;
    }
}

Bu medya sorgusu, ekran genişliği 800 piksel veya daha küçük olduğunda başlık rengini mor yapar. Bu da genellikle mobil cihazlara yönelik tasarımlarda tercih edilir.

4. Bir Aralık Belirleme (min-width ve max-width ile)

@media (min-width: 600px) and (max-width: 800px) {
    h1 {
        color: purple;
    }
}

Bu medya sorgusu, ekran genişliği 600 piksel ile 800 piksel arasında olduğunda başlığın mor olmasını sağlar. Bu yöntem, belirli bir aralıktaki cihazlar için özelleştirilmiş stiller oluşturmak için kullanılır.

Farklı Medya Özellikleri Kullanma

Medya sorguları sadece ekran genişliği ile sınırlı değildir. Cihazın yönüne (portrait veya landscape), ışık seviyesine ve hatta renk kontrastına göre de CSS stilleri belirleyebiliriz.

1. Ekran Yönü (Orientation) Kullanımı

Bir cihazın dikey (portrait) veya yatay (landscape) modda olup olmadığını kontrol etmek için orientation özelliğini kullanabiliriz.

@media (orientation: landscape) {
    body {
        background-color: magenta;
    }
}

Bu kod, ekran yatay (landscape) moda geçtiğinde arka plan rengini magenta yapar.

Responsive Tasarım İçin Yaygın Medya Sorguları

Aşağıda, yaygın ekran boyutları için kullanılan medya sorgularına örnekler verilmiştir:

/* Küçük ekranlar (mobil cihazlar) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* Tabletler */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
    }
}

/* Büyük ekranlar (masaüstü) */
@media (min-width: 1025px) {
    body {
        background-color: lightgray;
    }
}

Bu kodlar sayesinde:

600 pikselden küçük ekranlarda arka plan açık mavi olur (mobil cihazlar için).
601 ile 1024 piksel arasındaki ekranlarda arka plan açık yeşil olur (tabletler için).
1025 piksel ve üzerindeki ekranlarda arka plan açık gri olur (masaüstü için).

Sonuç

Medya sorguları, responsive web tasarımının temel taşlarından biridir. Farklı ekran boyutları için uygun tasarımlar oluşturmak, kullanıcı deneyimini önemli ölçüde iyileştirir. Medya sorgularını kullanarak sayfanın genişlik, yön, ışık seviyesi gibi birçok özelliğe göre değişmesini sağlayabiliriz.

Bir projede medya sorgularını kullanırken:

min-width kullanarak mobil öncelikli tasarım (mobile-first design) oluşturmak daha mantıklıdır.
max-width ile belirli ekran boyutlarında özelleştirilmiş stiller ekleyebilirsiniz.
Birden fazla medya sorgusunu bir arada kullanarak daha detaylı düzenlemeler yapabilirsiniz.

Medya sorgularıyla mobil uyumlu, kullanıcı dostu ve esnek tasarımlar oluşturabilirsiniz!