CSS · Mobil uyumlu tasarım (media query) — videolu atölye

Mobil uyumlu tasarım (media query)

Mobil öncelikli bir yerleşimi ekran genişliğine göre geliştirmek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

Temel kurallar dar ekran için tek sütun kurar. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

Viewport meta satırı HTML belgesinde ayrıca bulunmalıdır.

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

Bir değeri sen değiştir

Önce yalnızca tek sütunlu sürümü kur. Alan yeterli olduğunda iki sütuna geçiren min-width koşulu ekle.

Hata nereden gelir?

Viewport eklemek tek başına sabit genişlikli düzeni düzeltmez; esnek ölçüler de gerekir.

Kendi çözümünü kur

320px, 700px ve 1000px genişliklerde, ardından yakınlaştırmayla dene. Eşik değeri pencerenin CSS pikseli cinsinden genişliğini kontrol eder; fiziksel piksel sayısını değil.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

Mobil öncelikli tasarımda temel CSS hangi görünümü kurar? Yanıt: Dar ekran için çalışan temel görünümü; geniş ekran düzeni koşullarla eklenir.

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