Interogări media CSS - exemple. Interogări media pentru meniuri.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
În acest exemplu, folosim interogări media pentru a crea un meniu de navigare responsive, care variază în ceea ce privește designul pe diferite dimensiuni de ecran.
Exemplu:
/* Containerul navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Link-uri Navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Pe ecranele cu o lățime de 600px sau mai mică, faceți ca link-urile să se strângă una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}