Breakpoints
Yaygın breakpoint değerlerini ve seçim ölçütlerini öğrenirsin.
Breakpoint nedir?
Breakpoint, stillerin değiştiği ekran genişliğidir. @media (min-width: 768px) yazdığında 768px bir breakpoint olur: bu genişlikte stiller değişir.
Yaygın breakpointler genelde cihaz sınırlarına göre seçilir: ~576px (telefon), ~768px (tablet), ~1024px (küçük masaüstü), ~1280px (geniş masaüstü). Ancak projenin içeriğine göre değişebilir.
Mobile-first yaklaşımı
Mobile-first, önce telefona yönelik temel stilleri yazıp sonra min-width ile genişleyen ekranlar için yeni @media blokları eklemektir.
Avantajı: telefon stilleri en sade hâliyle yazılır, genişledikçe eklemeler yapılır. CSS'te genellikle min-width kullanılır.
body { font-size: 16px; }
@media (min-width: 768px) {
body { font-size: 18px; }
}Desktop-first yaklaşımı
Desktop-first tersidir: önce masaüstüne yönelik stilleri yazıp sonra max-width ile daralan ekranlar için yeni @media blokları eklersin. Masaüstü stilleri taban, telefon stilleri ise üzerine eklenir.
Bu yaklaşım daha eski kodlarda yaygındı. Bugün önerilmez; çünkü telefon trafiği çoğunluğu oluşturur ve telefona yönelik sade stillerle başlamak daha verimlidir. Mobile-first yazmak telefona öncelik verir.
Uygulama Mobile-first: 768px üstünde iki sütun
Telefonda tek sütun olan .cards kapsayıcısını, 768px ve üstünde iki sütuna çevir. Bir @media (min-width: 768px) bloğu ekle ve içine .cards seçicisiyle grid-template-columns: 1fr 1fr bildirimini yaz.
Örnek çözümü göster
.cards {
display: grid;
grid-template-columns: 1fr;
}
/* 768px ve üstünde iki sütun yap */
@media (min-width: 768px) {
.cards {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Kendini test et
-
Hangisi yaygın bir tablet breakpoint'i?
- 768px
- 120px
- 4000px
- 12px
Cevabı göster
768px — Doğru. 768px tabletler için yaygın bir breakpoint'tir; birçok framework bu değeri kullanır.
-
Mobile-first @media bloğunu tamamla
body { font-size: 16px; } @media (____: 768px) { body { font-size: 18px; } }Cevabı göster
body { font-size: 16px; } @media (min-width: 768px) { body { font-size: 18px; } } -
Yaklaşımları eşleştir
- Mobile-first
- min-width
- Desktop-first
- max-width
- Mobile-first avantajı
- Sade telefon stilleri
- Desktop-first avantajı
- Eski kodlarla uyum