EMZETT.
Giriş yap

Emzett Wiki

Medya sorguları ve kesme noktaları: düzeni ekranlara uyarlamak

Properties1
tagsglossar, css, frontend

2 dakika okuma süresi

Medya sorguları ve kesme noktaları: düzeni ekranlara uyarlamak

Kısaca: Medya sorgularıyla CSS kuralları yalnızca belirli koşullar altında uygulanır, örneğin belirli bir ekran genişliğinden itibaren; bu, bir sayfayı telefona, tablete ve masaüstüne uyarlar.

Biraz daha ayrıntılı: Duyarlı bir sayfa her cihazda iyi görünür. Ön koşul, mobil tarayıcıların gerçek genişliği kullanması için HTML’de <meta name="viewport" content="width=device-width, initial-scale=1"> bulunmasıdır.

Ayrıntılı

Sözdizimi ve önce mobil

.card { display: block; }            /* varsayılan: telefon */
@media (min-width: 768px) {
  .card { display: flex; gap: 1rem; } /* tabletten itibaren */
}
@media (min-width: 1200px) {
  .card { max-width: 1100px; }        /* masaüstünden itibaren */
}

Önce mobil: önce küçük ekranlar için düzeni yaz, sonra daha büyükler için min-width ile ekle. Bu genellikle daha basittir ve telefonda gereksiz şey yükler.

Tipik kesme noktaları

Yaklaşık 640 px (büyük telefon), 768 px (tablet), 1024 px (küçük dizüstü), 1280 px (masaüstü). Kesme noktalarını içeriğe göre ayarla: düzen nerede bozuluyor? Orada bir tane koy. Göreli birimler (rem, %, vw) ve akışkan yazı boyutları için clamp() kullan: font-size: clamp(1rem, 2.5vw, 1.5rem);.

Diğer sorgular

  • prefers-color-scheme: dark: sistemin karanlık modu.
  • prefers-reduced-motion: reduce: animasyonları azalt (erişilebilirlik).
  • orientation: landscape, yazdırma için print.
  • hover: hover ve pointer: coarse: fare ve dokunmatik karşılaştırması.
  • Kapsayıcı sorguları (@container) pencere yerine çevreleyen öğenin boyutuna tepki verir, yeniden kullanılabilir bileşenler için idealdir.

Denetim ve tuzaklar

Tarayıcı geliştirici araçlarının cihaz simgeleriyle (F12) ve gerçek cihazlarda test et. Sabit piksel genişliklerinden, yatay kaydırmadan ve çok küçük dokunma hedeflerinden (en az yaklaşık 44 px) kaçın. Görselleri max-width: 100% ve srcset ile uyarla. Flexbox ve Grid, medya sorguları olmadan da çok şeyi çözer (flex-wrap, repeat(auto-fit, minmax(...))).

Ayrıca bak: WCAG ve renk kontrastı

Backlinkler