Nested media
@media içinde nested kullanmayı öğrenirsin.
@media iç içe
Bir seçicinin içine @media bloğu yerleştirilebilir. .grid { @media (max-width: 600px) { grid-template-columns: 1fr; } } yazdığında tarayıcı bunu dışarı çıkarır ve @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } } olarak uygular.
Sonuç aynıdır; ancak stil, bileşene yakın durur. Bileşenin küçük ekran davranışını tanımından uzakta aramak zorunda kalmazsın.
Bileşene yakın yanıt
Nested @media, bileşenin responsive davranışını tanımıyla birlikte tutar. Sepet bileşeninin .cart bloğunda @media (max-width: 600px) yazarsan, küçük ekrandaki haliyle büyük ekrandaki hali tek yerde durur.
Dosyada ileri geri gezinme azalır. Bileşen kütüphanesi kuruyorsan her bileşen kendi içinde taşınabilir hale gelir.
Uygulama Küçük ekran için tek sütun
.grid seçicisinin içine bir @media (max-width: 600px) bloğu ekle ve içine grid-template-columns: 1fr özelliğini yaz.
Örnek çözümü göster
.grid bloğunun içine @media bloğu ekle.
Örnek çözüm:
/* .grid içine @media ekle */
.grid {
grid-template-columns: 1fr 1fr;
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}Tema tercihleri nested
Aynı yapı prefers-color-scheme gibi kullanıcı tercihleri için de çalışır. .card { @media (prefers-color-scheme: dark) { background: #111; color: #eee; } } yazarsan kart, koyu tema seçildiğinde otomatik koyu arka plana döner.
Bileşen, kendi koyu temasını kendi içinde taşır. Ayrı bir .dark .card seçicisine gerek kalmaz.
Kendini test et
-
Hangi yazım nested @media gösterir?
- @media { .grid { } } (max-width: 600px)
- .grid { @media { grid-template-columns: 1fr; } }
- @media (max-width: 600px) .grid { }
- .grid { @media (max-width: 600px) { grid-template-columns: 1fr; } }
Cevabı göster
.grid { @media (max-width: 600px) { grid-template-columns: 1fr; } } — Doğru. @media bloğu .grid bloğunun içinde, kendi koşulu ve süslü parantezleriyle yazılmış.
-
Koşulu tamamla
.grid { @media ____ { grid-template-columns: 1fr; } }Cevabı göster
.grid { @media (max-width: 600px) { grid-template-columns: 1fr; } }