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.

Kopya kağıdı

CSS'teki bir medya sorgusu (media query), bir web sitesinin cihaz genişliği, yüksekliği veya diğer özelliklerine göre stiller uygulayarak farklı ekran boyutlarına uyum sağlamasına olanak tanır.

Temel sözdizimi:

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

Yaygın koşullar:

max-width: Stilleri maksimum genişliğe sahip ekranlarla sınırlar
min-width: Stilleri minimum genişliğe sahip ekranlara uygular
max-height: Stilleri maksimum yüksekliğe sahip ekranlarla sınırlar
min-height: Stilleri minimum yüksekliğe sahip ekranlara uygular

Örnek:

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

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

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>