Meydan okuma - Duyarlı navbar
Mobil öncelikli duyarlı bir navbar kurarsın.
Mobil öncelikli navbar
Bir navbar mobil cihazda dikey, masaüstünde yatay açılır. Mobil öncelikli yaklaşımda önce küçük ekran yazılır: menü flex-direction: column ile dikey dizilir, gereksiz bağlantılar display: none ile gizlenir.
Sonra @media (min-width: 768px) ile geniş ekran bildirimleri eklenir: flex-direction: row ile yatay, gizli bağlantılar display: block ile geri açılır. Mobil önce yazılan kod, daraltma sırasında kırılmaz; masaüstüne eklemektir, çıkarmak değil.
Uygulama Duyarlı navbar kur
Aşağıdaki CSS'i tamamla. .menu mobilde dikey dizilsin ve .extra bağlantısı gizlensin. 768px ve üzeri için .menu yatay, .extra görünür olsun.
Örnek çözümü göster
/* menü - mobil önce */
.menu {
flex-direction: column;
}
/* ekstra bağlantı - mobil önce */
.extra {
display: none;
}
/* geniş ekran */
@media (min-width: 768px) {
.menu {
flex-direction: row;
}
.extra {
display: block;
}
}Kendini test et
-
Masaüstü yönünü yaz
@media (min-width: 768px) { .menu { flex-direction: ____; } }Cevabı göster
@media (min-width: 768px) { .menu { flex-direction: row; } } -
Mobil öncelikli yaklaşımda hangi medya sorgusu kullanılır?
/* mobil önce */ .menu { flex-direction: column; } /* geniş ekran */ @media (...) { .menu { flex-direction: row; } }- @media (max-width: 768px)
- @media (orientation: landscape)
- @media (min-width: 768px)
- @media (hover: none)
Cevabı göster
@media (min-width: 768px) — Doğru. min-width: 768px, 768px ve üzeri için bildirimleri uygular; mobil öncelikli yaklaşıma uyar.
-
Navbar özelliğini rolüyle eşleştir
- flex-direction: column
- Mobilde menüyü dikey dizer
- flex-direction: row
- Masaüstünde yatay dizer
- display: none
- Bağlantıyı gizler
- display: block
- Gizli bağlantıyı geri açar
- @media (min-width: 768px)
- Geniş ekran bildirimlerini başlatır