Mobil uyumlu tasarım (media query)

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Mobil uyumluluk bir cihaz adı listesi değildir. İçeriğin farklı genişliklerde okunabilmesi ve kullanılabilmesidir. Önce dar ekran için tek sütunlu, rahat bir düzen kur. Daha geniş alan oluştuğunda gerekli yerleri çok sütuna çıkar. Bu yaklaşım temel içeriğin küçük ekranda unutulmasını önler.

Media query belirli bir koşul sağlandığında CSS kurallarını etkinleştirir. min-width genişlik eşik değerine ulaştığında; max-width ise belirli genişliğe kadar devreye girer. Eşiklerini telefon marka/modeline değil, içeriğin sıkıştığı noktaya göre seç. Düzenin iki eşik arasında da çalışması gerekir.

Testi yalnızca tarayıcıdaki tek bir hazır telefon ölçüsünde yapma. Pencereyi yavaşça daralt, uzun başlık ekle ve yakınlaştır. Görsellerin kendi kapsayıcısından taşmadığını, düğmelerin tıklanabilir kaldığını ve sıranın değişirken anlamın kaybolmadığını gözlemle.

İlk örneği oku ve dene

<style>
  .kart {
    padding: 20px;
    background-color: #dcfce7;
  }
  /* Ekran 600 piksel veya daha darsa (telefon) */
  @media (max-width: 600px) {
    .kart {
      background-color: #fee2e2;
      font-size: 14px;
    }
  }
</style>

<div class="kart">Ekran daralınca rengim değişir!</div>

Geniş ekranda yeşil zeminli bir kutu görünür; ekran 600 piksel veya daha darsa kutu kırmızımsı olur ve yazı küçülür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. Temel kurallar dar ekran için tek sütun kurar.
2. min-width:700px daha geniş alan için ek düzeni açar.
3. minmax(0,1fr) ızgara öğelerinin içerik yüzünden gereksiz büyümesini azaltır.
4. Viewport meta satırı HTML belgesinde ayrıca bulunmalıdır.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{box-sizing:border-box}.liste{display:grid;gap:16px}
@media(min-width:700px){.liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kart{padding:20px;background:#eef2ff}
</style>
<div class="liste"><div class="kart">İlk ders</div><div class="kart">İkinci ders</div></div>

700px altında tek, daha genişte iki sütun.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Önce yalnızca tek sütunlu sürümü kur.
2. Alan yeterli olduğunda iki sütuna geçiren min-width koşulu ekle.
3. 320px, 700px ve 1000px genişliklerde, ardından yakınlaştırmayla dene.

<style>.kartlar{display:grid;gap:12px}@media(min-width:600px){.kartlar{grid-template-columns:1fr 1fr}}.kartlar div{padding:16px;background:#e2e8f0}</style>
<div class="kartlar"><div>A</div><div>B</div></div>

600px genişliğe kadar tek, sonrasında iki sütun.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Viewport eklemek tek başına sabit genişlikli düzeni düzeltmez; esnek ölçüler de gerekir.
2. Mobilde önemli içeriği display:none ile yok etmek yerine düzeni iyileştir.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Mobil öncelikli tasarımda temel CSS hangi görünümü kurar?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.