Interogări media CSS - exemple. Interogări media CSS - mai multe exemple.

Interogări media CSS (CSS Media Queries) - exemple

Interogări media CSS (CSS Media Queries) - mai multe exemple

Să ne uităm la câteva exemple de utilizare a interogărilor media.

Interogările media sunt o tehnică populară pentru livrarea unei foi de stil adaptate diferitelor dispozitive. Pentru a demonstra un exemplu simplu, putem schimba culoarea de fundal pentru diferite dispozitive:

Exemplu:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* Pe ecranele cu 992px sau mai puțin, setați background color pe blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* Pe ecrane cu o dimensiune mai mare de 600px, setați background color pe olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}