Responsive Tasarımın Temelleri: Viewport ve Media Queries

Bir sayfa masaüstünde düzgün görünürken telefonda küçülmüş metinler veya yatay kaydırma üretiyorsa iki farklı sorunu ayırın: tarayıcının kullandığı viewport ve içeriğin bu alana sığmasını sağlayan CSS düzeni. Viewport etiketi tek başına sabit genişlikteki bir tabloyu veya görseli esnek hâle getirmez.

Viewport etiketini sayfanın head alanına koyun

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width, düzen genişliğinin cihazın CSS pikseli cinsinden genişliğini kullanmasını ister. Bu değer fiziksel ekran pikseli sayısıyla aynı olmak zorunda değildir. Başlangıç ölçeği 1 olarak belirlenir; kullanıcı yakınlaştırmasını kapatan ek seçenekler koymayın. Metni büyütmek isteyen okuyucunun sayfayı kullanabilmesi gerekir.

Önce dar ekran için çalışan temel düzen

Aşağıdaki örnekte .cards kartları taşıyan kapsayıcıdır. Temel kural tek sütun oluşturur. Yeterli alan olduğunda ikinci ve üçüncü sütun eklenir; kartların kendi başlıkları veya içerikleri değiştirilmez.

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cards > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

40rem ve 64rem, bu düzen için örnek eşiklerdir; telefon ve tabletin evrensel sınırları değildir. İçeriğin sıkıştığı noktayı ölçerek seçim yapın. Temel kuralın üstüne yalnızca min-width kuralları eklemek, birbirinden kopuk 576/577 gibi aralıklarda oluşabilecek boşlukları da önler.

Media query çalışmıyorsa neye bakılır?

• Geliştirici araçlarında viewport genişliğini ve kuralın etkin olup olmadığını kontrol edin.
• CSS dosyasının gerçekten yüklendiğini ve önbellekte eski dosyanın kalmadığını doğrulayın.
• Kural etkin ama etkisizse daha sonra gelen veya daha yüksek özgüllüğe sahip seçiciyi inceleyin.
• Bir çocuk öğedeki sabit genişliği, uzun URL'yi veya minimum içerik boyutunu kontrol edin.

Taşmayı overflow-x: hidden ile gizlemek, içerik kesilmesini çözmeyebilir. Önce taşan öğeyi bulun. Kod blokları ve tablolar için okunabilirliği koruyan ayrı bir yatay kaydırma alanı gerekebilir.

Yalnızca üç hazır ekran boyutunda test etmeyin

Pencereyi eşiklerin hemen öncesinde ve sonrasında daraltın. Uzun bir başlık, uzun bağlantı ve boş görsel alanıyla tekrar deneyin. Ardından metni büyütün ve klavyeyle bağlantılara ilerleyin. Bir kartın altındaki düğme görünmez oluyorsa sorun yalnızca sütun sayısı değil, sabit yükseklik veya taşma kuralı olabilir.

Kartların içindeki düğmeleri hizalamak için Flexbox ve Grid karşılaştırmasına bakabilirsiniz. Başvuru: MDN media query kullanımı.