CSS Interogări media. Exemple simple de Interogări media.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
O modalitate de a utiliza interogări media (media queries) este să aveți o secțiune CSS alternativă chiar în foaia de stil (style sheet).
Următorul exemplu schimbă culoarea de fundal (background-color) în verde deschis dacă viewport-ul are o lățime de 480 de pixeli sau este mai lată (dacă viewport-ul este mai mic de 480 pixeli, culoarea de fundal (background-color) va fi roz):
Exemplu:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Următorul exemplu arată un meniu care va pluti (float) la stânga paginii dacă viewport-ul are o lățime de 480 de pixeli sau este mai lată (dacă viewport-ul este mai mic de 480 pixeli, meniul va fi deasupra conținutului):Exemplu:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}