Media query temelleri
@media kuralını ve ekran genişliği koşullarını öğrenirsin.
@media bloğu nedir?
@media bloğu, belirli bir koşul sağlandığında uygulanacak stilleri gruplandırır. En yaygın koşul ekran genişliğidir. Telefon genişliğinde başka, masaüstü genişliğinde başka stiller kullanabilirsin.
@media (max-width: 600px) {
body {
background: navy;
color: white;
}
}Anahtar kelime @media, parantez içinde koşul, süslü parantezler içinde stiller.
max-width media feature
max-width bir media feature'dur (medya özelliği). "En fazla bu genişlik" anlamına gelir. @media (max-width: 600px) yazdığında, ekran 600px veya daha dar olduğunda stiller uygulanır.
Bu, masaüstünden telefona doğru gidildikçe stilleri değiştiren desktop-first yaklaşımında yaygındır. Büyük ekrandan başlayıp her daraltmada yeni bir @media eklersin.
min-width media feature
min-width ise "en az bu genişlik" demektir. @media (min-width: 768px) yazdığında, ekran 768px veya daha geniş olduğunda stiller uygulanır.
Bu, mobile-first yaklaşımının temel taşıdır. Telefona yönelik temel stilleri yazarsın, sonra her genişleme adımında yeni bir @media eklersin. Bugün bu yaklaşım önerilir.
Uygulama 600px altında arka planı değiştir
Bir @media (max-width: 600px) bloğu ekle. İçinde body seçicisi için background: navy ve color: white bildirimlerini yaz.
Örnek çözümü göster
/* 600px ve altında gövde rengini değiştir */
@media (max-width: 600px) {
body {
background: navy;
color: white;
}
}Kendini test et
-
@media (max-width: 600px) ne zaman uygulanır?
@media (max-width: 600px) { body { font-size: 18px; } }- Yalnızca ekran 600px'den geniş olduğunda
- Yalnızca ekran 600px veya daha dar olduğunda
- Her ekran genişliğinde
- Yalnızca yatay moddayken
Cevabı göster
Yalnızca ekran 600px veya daha dar olduğunda — Doğru. max-width: 600px koşulu, ekran 600px veya daha dar olduğunda sağlanır.
-
@media bloğunu tamamla
@media (max-width: ____) { body { background: navy; } }Cevabı göster
@media (max-width: 600px) { body { background: navy; } } -
Hangisi doğrudur?
- max-width geniş ekranlar için, min-width dar ekranlar için uygulanır
- İkisi de yalnızca yazdırırken (print) uygulanır
- İkisi de her zaman uygulanır
- max-width dar ekranlar için, min-width geniş ekranlar için uygulanır
Cevabı göster
max-width dar ekranlar için, min-width geniş ekranlar için uygulanır — Doğru. max-width 'en fazla', min-width 'en az' demektir; max daraltmada, min genişletmede uygulanır.