Web Design Responsiv - Interogări media. Ascundeți elementele cu interogări media. Modificați dimensiunea fontului cu interogări media.

Ascundeți elementele cu interogări media (Hide Elements With Media Queries)

O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran:



Exemplu:

/* Dacă dimensiunea ecranului este lată sau mai mică de 600px, ascunde elementul */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)

De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului:



Exemplu:

/* Dacă dimensiunea ecranului este de 601px sau mai mult, setați dimensiunea fontului <div> la 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Dacă dimensiunea ecranului este de 600px sau mai mică, setați dimensiunea fontului <div> la 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}