Media Queries Temelleri

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

CSS'te bir media query, cihazın width, height veya diğer property değerlerine göre stiller uygulayarak bir web sitesinin farklı ekran boyutlarına uyum sağlamasını sağlar.

Media Queries için Temel Söz Dizimi:

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

condition: Stilleri tetikleyen kural (örneğin, max-width: 600px).
selector: Biçimlendirilecek HTML öğesi/öğeleri.

property: Ayarlanacak CSS özelliği (örneğin, width, font-size).
value: media query koşuluna göre değişen, property'ye atanan değer.

Bir medya sorgusunda condition, 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ği olan ekranlarla sınırlar (ör. max-width: 600px).
min-width: Stilleri minimum genişliği olan 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).

These koşullar, web sitenin farklı cihazlarda ve yönlerde nasıl göründüğünü kontrol etmene yardımcı olur.

Örnek:

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

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

Bu, ekran width değeri 600px veya daha küçük olduğunda background color değerini lightblue olarak değiştirir. 601px ile 1024px arasındaki ekranlarda background color değeri lightgreen olur.

Görev

Kolay

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

max width değeri 600px olan ekranlar için bir @media sorgusu ekleyin:
- body öğesinin background color değerini lightblue olarak ayarlayın.
- Başlığın (<h1>) font size değerini 5vw (viewport width değerinin %5'i) olarak ayarlayın.
min width değeri 601px ve max width değeri 1024px olan ekranlar için bir @media sorgusu ekleyin:
- body öğesinin background color değerini lightgreen olarak ayarlayın.
- Başlığın (<h1>) font size değerini 3vw (viewport width değerinin %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>