Bir CSS media query, tasarımının ekran boyutuna, yönelimine ya da kullanıcı tercihlerine göre farklı stiller uygulamasını sağlayan en temel responsive araçtır. Telefonda dört yana taşan bir tablo, masaüstünde kocaman görünen bir buton ya da yatay kaydırma çubuğu çıkaran bir bölüm; bunların neredeyse tamamı düşünülmemiş veya yanlış kurgulanmış breakpoint'lerden kaynaklanır. Bu rehberde mobil öncelikli bir breakpoint stratejisini sıfırdan kurmayı, en sık yapılan hataları ve modern alternatifleri pratik örneklerle anlatıyorum.
Media query nasıl çalışır?
Bir media query, bir medya tipi (genellikle screen) ve bir veya daha fazla koşulun birleşiminden oluşur. Koşul doğruysa içindeki kurallar uygulanır, değilse atlanır. En çok kullanılan koşullar min-width ve max-width'tür.
/* 600px ve üzeri ekranlarda uygulanır */
@media (min-width: 600px) {
.kart {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Burada kritik nokta şu: min-width: 600px "genişlik 600px veya daha fazla ise" anlamına gelir. max-width: 600px ise "genişlik 600px veya daha az ise" demektir. Bu ikisini karıştırmak responsive hataların bir numaralı sebebidir.
Mobil öncelikli yaklaşım neden kazanır?
İki strateji vardır: küçük ekrandan büyüğe doğru kural eklemek (mobile-first, min-width ile) ya da büyük ekrandan küçüğe doğru kural ezmek (desktop-first, max-width ile). Mobil öncelikli yaklaşımı tercih etmenin somut sebepleri var:
- Varsayılan stil en basit hâldir: Temel stilleri tek sütun olarak yazarsın, karmaşıklığı yalnızca ekran büyüdükçe eklersin.
- Daha az kural ezme (override):
max-widthile başlarsan büyük ekran stillerini sürekli geri almak zorunda kalırsın; bu CSS'i kırılgan yapar. - Performans: Mobil cihaz, kendisini ilgilendirmeyen masaüstü kurallarını hesaplamak zorunda kalmaz.
Pratikte temel stilini hiçbir media query olmadan yaz, sonra büyüyen ekranlar için min-width blokları ekle:
/* Mobil: varsayılan, tek sütun */
.izgara { display: grid; gap: 16px; }
/* Tablet ve üzeri */
@media (min-width: 768px) {
.izgara { grid-template-columns: repeat(2, 1fr); }
}
/* Masaüstü */
@media (min-width: 1024px) {
.izgara { grid-template-columns: repeat(3, 1fr); }
}Breakpoint'leri nereye koymalı?
Yaygın bir yanılgı, breakpoint'leri popüler cihazların piksel genişliklerine (iPhone, iPad gibi) göre belirlemektir. Cihaz modelleri sürekli değişir; bugünkü "standart" yarın geçersiz olur. Doğru yaklaşım, breakpoint'i içeriğin bozulduğu yere koymaktır. Tasarımını yavaşça genişlet; satırlar fazla uzayıp okunması zorlaştığında ya da bir kart çirkin biçimde sıkıştığında oraya bir breakpoint koy.
Yine de bir başlangıç noktası faydalıdır. Çoğu projede şu üç-dört aralık iş görür:
- ~480–600px: büyük telefon / küçük tablet geçişi
- ~768px: tablet, dikey düzenden çok sütuna geçiş
- ~1024px: küçük masaüstü / yatay tablet
- ~1280px+: geniş masaüstü, içerik genişliğini sınırlama
Bu değerleri kutsal sayma; projenin gerçek içeriğine göre kaydır.
px, em, rem: birimi doğru seçmek
Media query koşullarında px yerine em kullanmanın bir avantajı vardır: kullanıcı tarayıcı yazı tipi boyutunu büyüttüğünde breakpoint'ler de ölçeklenir, böylece erişilebilirlik artar. Media query içindeki em, root font boyutuna (genellikle 16px) göre hesaplanır; yani 37.5em ≈ 600px olur.
@media (min-width: 48em) { /* ~768px */
.yan-menu { position: sticky; top: 0; }
}Genel kural: layout breakpoint'leri için em tutarlı bir tercihtir, ama px da tamamen geçerlidir; ekibinde tek bir standart belirleyip ona sadık kal.
Genişlik dışında işe yarayan media query'ler
Media query sadece genişlikle ilgili değildir. Birkaç güçlü kullanımı:
- Yönelim:
@media (orientation: landscape)ile yatay tutuşa özel düzen. - Koyu mod:
@media (prefers-color-scheme: dark)ile sistem temasına uyum. - Azaltılmış hareket:
@media (prefers-reduced-motion: reduce)ile animasyonları kapatmak; bu bir erişilebilirlik gerekliliğidir. - İşaretçi türü:
@media (hover: hover)ile yalnızca fareli cihazlarda hover efekti vermek.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition: none !important; }
}Modern alternatif: container query'ler
Media query'ler her zaman görünüm alanına (viewport) bakar. Ama çoğu zaman istediğin, bir bileşenin kendi kapsayıcısının genişliğine göre uyum sağlamasıdır. İşte burada @container sorguları devreye girer ve artık tüm güncel tarayıcılarda desteklenir.
.liste { container-type: inline-size; }
@container (min-width: 400px) {
.kart { display: flex; gap: 12px; }
}Bu sayede aynı kart bileşeni dar bir kenar çubuğunda alt alta, geniş bir ana alanda yan yana dizilebilir; üstelik global breakpoint'lere dokunmadan. Container query'ler media query'lerin yerini almaz, onları tamamlar: sayfa düzeni için media query, yeniden kullanılabilir bileşenler için container query iyi bir iş bölümüdür.
Olmazsa olmaz: viewport meta etiketi
Tüm media query'lerin mobilde doğru çalışması için sayfanın <head> bölümünde şu satır bulunmalı. Bu olmadan telefon, sayfayı masaüstü genişliğinde render edip küçültür ve breakpoint'lerin çalışmaz:
<meta name="viewport" content="width=device-width, initial-scale=1">Sık Sorulan Sorular
min-width mi max-width mı kullanmalıyım?
Mobil öncelikli çalışıyorsan ağırlıklı olarak min-width kullan: temel stil mobil, büyüdükçe ekle. Tek bir stratejiye bağlı kal; ikisini gelişigüzel karıştırmak çakışan kurallara ve hata ayıklaması zor CSS'e yol açar.
Kaç breakpoint kullanmalıyım?
Sabit bir sayı yok. Çoğu site üç-dört breakpoint ile gayet iyi çalışır. İçeriğin bozulduğu yere koy; cihaz modeline göre değil. Gereksiz breakpoint, bakımı zorlaştırır.
Container query'ler media query'lerin yerini alacak mı?
Hayır, ikisi birlikte kullanılır. Genel sayfa düzeni ve global eşikler için media query, bağlamına göre uyum sağlayan bileşenler için container query mantıklıdır.
Responsive bir arayüze mi ihtiyacın var? Mobil öncelikli, temiz ve bakımı kolay bir CSS mimarisiyle her ekranda kusursuz görünen siteler kuruyorum. Projeni konuşmak için benimle iletişime geç.