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ü

Sıradaki ders: Grid ile duyarlı düzen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler