Mobil öncelikli yaklaşım
Mobil öncelikli CSS yazma yöntemini öğrenirsin.
Mobil öncelikli yaklaşım
Mobil öncelikli (mobile-first) yaklaşım, küçük ekran stillerini önce yazıp ardından @media (min-width: ...) bloklarıyla geniş ekran stilleri eklemektir. CSS yukarıdan aşağı okunduğu için en son yazılan bildirim kazanır; min-width koşulları yalnızca görünüm alanı yeterince genişse uygulanır.
Böylece küçük cihazlar yalnızca kendileri için yazılmış az CSS'i yükler; büyük ekranlar ek stilleri gerektiğinde alır. Bu yöntem hem performans hem de bakım açısından temiz bir temel sunar.
min-width nasıl çalışır?
@media (min-width: 768px) bloğu yalnızca görünüm alanı 768 piksel veya daha geniş olduğunda uygulanır. Temel stiller her zaman çalışır; media query içindeki bildirimler yalnızca koşul sağlandığında üstüne biner.
Bu nedenle önce küçük ekran stillerini yazıp aşağıya doğru geniş ekran blokları eklemek, doğal bir arttırımlı (progressive) düzen kurar.
Yaygın breakpoint değerleri
Mobil öncelikli düzende yaygın eşikler (breakpoint) şöyledir: 576px küçük telefon, 768px tablet, 992px masaüstü, 1200px geniş masaüstü. Bunlar sabit değil; tasarımın ihtiyacına göre kaydırılabilir.
Önemli olan, ekranı cihaza göre değil içeriğin bozulmaya başladığı genişliğe göre bölmektir. Bu yüzden bazı ekipler 640px, 960px gibi değerleri tercih eder.
Uygulama Tablet için .card padding'i artır
Aşağıdaki mobil temel stilin üstüne, 768 piksel ve daha geniş ekranlar için bir @media (min-width: 768px) bloğu ekle. Bu blok içinde .card öğesinin padding değerini 2rem yap.
Örnek çözümü göster
@media (min-width: 768px) {
.card {
padding: 2rem;
}
}Kendini test et
-
Mobil öncelikli yaklaşımda hangi media query türü kullanılır?
/* Temel stiller (mobil) */ .card { padding: 1rem; } /* ? */ @media (____: 768px) { .card { padding: 2rem; } }- Yalnızca max-width
- min-width ile başlayan
- Yalnızca @media print
- @media kullanmadan
Cevabı göster
min-width ile başlayan — Doğru. min-width ile başlayan sorgu, koşul sağlandığında temel stillerin üzerine biner.
-
Tablet için min-width koşulunu yaz
@media (____: 768px) { .card { padding: 2rem; } }Cevabı göster
@media (min-width: 768px) { .card { padding: 2rem; } } -
Breakpoint değerini karşılığıyla eşleştir
- @media (min-width: 576px)
- Küçük telefon ve üzeri
- @media (min-width: 768px)
- Tablet ve üzeri
- @media (min-width: 992px)
- Masaüstü ve üzeri
- @media (min-width: 1200px)
- Geniş masaüstü