Media Queries Temelleri

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

CSS'deki bir medya sorgusu, cihaz genişliği, yüksekliği veya diğer özelliklere dayalı stiller uygulayarak bir web sitesinin farklı ekran boyutlarına uyum sağlamasına olanak tanır.

Medya Sorguları için Temel Sözdizimi:

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

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

property: Ayarlanacak CSS özelliği (örneğin, width, font-size).
value: Medya sorgusu 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. Bazı yaygın koşullar şunlardır:

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

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

Bu koşullar, web sitenizin farklı cihazlarda ve yönlerde 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;}

Bu, ekran genişliği 600px veya daha küçük olduğunda arka plan rengini lightblue olarak değiştirir. 601px ve 1024px arasındaki ekranlar için arka plan rengi lightgreen olacaktır.

Görev

Kolay

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

Maksimum genişliği 600px olan ekranlar için bir @media sorgusu ekleyin:
- Gövdenin (body) arka plan rengini light blue olarak ayarlayın.
- Başlığın (<h1>) yazı tipi boyutunu 5vw (görünüm 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:
- Gövdenin (body) arka plan rengini light green olarak ayarlayın.
- Başlığın (<h1>) yazı tipi boyutunu 3vw (görünüm 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>
    <!--Kodunuzu buraya yazın-->
    <style>
        
        
    </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>