Medya Sorgularının Temelleri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 65 / 76.

CSS’te bir medya sorgusu, stilleri cihazın genişliğine, yüksekliğine veya diğer özelliklerine göre uygulayarak bir web sitesinin farklı ekran boyutlarına uyum sağlamasına olanak tanır.

Medya Sorguları için Temel Söz Dizimi:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

koşul: Stilleri tetikleyen kural (örneğin, max-width: 600px).
seçici: Stilin uygulanacağı HTML öğesi/öğeleri.

property: Ayarlanacak CSS özelliği (ör. width, font-size).
value: Media query koşuluna bağlı olarak değişen, özelliğe atanan değer.

Bir medya sorgusunda koşul, ekran boyutu, çözünürlük ve daha fazlası gibi çeşitli faktörlere dayanabilir. Yaygın koşullardan bazıları şunlardır:

max-width: Stilleri maksimum genişliğe sahip ekranlarla sınırlar (ör. max-width: 600px).
min-width: Stilleri minimum genişliğe sahip ekranlara uygular (ör. min-width: 768px).

max-height: Stilleri maksimum yüksekliğe sahip ekranlarla sınırlar (ör. max-height: 400px).
min-height: Stilleri minimum yüksekliğe sahip ekranlara uygular (ör. min-height: 500px).

Bu koşullar, web sitenizin farklı cihazlarda ve yönlendirmelerde nasıl göründüğünü kontrol etmenize yardımcı olur.

Örnek:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

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

Ekran genişliği 600px veya daha küçük olduğunda arka plan rengini lightblue olarak değiştirir. 601px ile 1024px arasındaki ekranlarda arka plan rengi lightgreen olacaktır.

Görev

Kolay

Size bir başlık (<h1>), bir paragraf (<p>) ve bir <div> içeren bir HTML belgesi verilmiştir. Göreviniz, sayfayı duyarlı hâle getirmek için medya sorguları eklemektir. Aşağıdaki adımları izleyin:

Maksimum genişliği 600px olan ekranlar için bir @media sorgusu ekleyin:
- body arka plan rengini açık mavi olarak ayarlayın.
- Başlığın (<h1>) yazı tipi boyutunu 5vw (görüntü alanı genişliğinin %5'i) olarak ayarlayın.
Minimum genişliği 601px ve maksimum genişliği 1024px olan ekranlar için bir @media sorgusu ekleyin:
- body arka plan rengini açık yeşil olarak ayarlayın.
- Başlığın (<h1>) yazı tipi boyutunu 3vw (görüntü alanı genişliğinin %3'ü) olarak ayarlayın.

Medya sorgularının düzeni dinamik olarak nasıl ayarladığını görmek için tarayıcı penceresini yeniden boyutlandırın.

Kendin dene

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Kodunuzu buraya yazın-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>