CSS Interogări media. Exemple simple de Interogări media.

Exemple simple de Interogări media (Media Queries Simple Examples)

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;}
}