CSS3 media Sorguları Kullanımı

CSS3 öncesinde ortaya çıkan ve farklı ekran ve ortamlar için farklı stil tanımlamayı sağlayan @media kuralı ile ilgili bilgiler yer almakta.

CSS3 @media yenilikleri

CSS3 öncesinde televizyon, yazıcı, projeksiyon gibi cihazlar için stil tanımlayabiliyorduk.

Sadece yazıcı çıktı stil tanımlaması kullanılıyordu.

Akıllı telefonların ve çeşitli boyuttaki cihazların çıkmasıyla farklı ekran boyutları ortaya çıktı.

Bu farklılıklar için CSS3 ile birlikte @media tanımı genişleyerek;

• yükseklik ve genişlik (height – width),
• ekran boyutu (device-width – device-hight),
• ekran yüksekliği (min-width, max-width, min-height, max-height),
• çözünürlük (resolution) gibi koşullara göre stil tanımlama özelliği eklendi.

CSS3 @media tabletler, iPhone ve Android cihazlara özel stil tanımlamak için kullanılan popüler bir tekniktir.

Medya sorgusu oluşturmak

CSS ile

@media not|only medya-tipi and (koşul) {
    CSS-Kodu;
}

Medya sorguları bir medya-tipi’ne göre sorgulama yapar ve sorgunun doğruluğuna göre CSS kodu uygulanır.

<link rel="stylesheet" media="medya-tipi and|not|only (koşul)" href="stildosyasi.css" />

Yukardaki kullanımda koşul alanına yazılmış olan ifade doğruysa stildosyasi.css içerisinde bulunan CSS kodları sayfaya uygulanacaktır.

CSS3 medya-tipleri

Örnek medya sorguları

Medya sorguları kullanmanın en iyi ve en çok kullanılan yöntemi CSS dosyası içerisinde CSS ile kullanmaktır.

Örnekte tarayıcı genişliği 600px ve üzerinde ise arka plan rengi açık yeşil, tarayıcı genişliği 599px ve altındaysa arka plan rengi açık mavi olacaktır.

body {
    background-color: lightblue;
}
@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

NOT: Medya sorgularını bilgisayarda görüntüleyebilmek için tarayıcı genişliği ile oymanız gerekmektedir.

body {
    background-color: lightblue;
}
@media screen and (min-width: 300px) {
    body {
        background-color: darkred;
    }
}
@media screen and (min-width: 600px) {
    body {
        background-color: darkblue;
    }
}
@media screen and (min-width: 900px) {
    body {
        background-color: darkgreen;
    }
}
@media screen and (min-width: 1200px) {
    body {
        background-color: darkviolet;
    }
}

Ekran aralığı belirlemek

CSS3 @media mantıksal and, not ve only ifadelerini kullanarak belirlemiş olduğumuz aralıktaki değerlere CSS stili vermek isteyebiliriz.

Aşağıdaki örnekte tarayıcı genişliği 600px ve 850px aralığında arka plan rengi koyu yeşil olacaktır.

Diğer durumlarda koyu mavi olacaktır.

body {
    background-color: darkblue;
}
@media screen and (min-width: 600px) and (max-width: 850px) {
    body {
        background-color: darkgreen;
    }
}

NOT: Konunun daha iyi anlaşılabilmesi için sayfa arka plan rengi değişikliği yaptım.

Siz istediğiniz sınıf, id veya etiketin istediğiniz özelliğini (yazı boyutu, yazı rengini, padding, margin) değiştirebilirsiniz.

CSS3 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.