Interogări media CSS - exemple. Ascundeți elementele cu interogări media. Modificați dimensiunea fontului cu interogări media.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
O altă utilizare obișnuită a interogărilor media este de a ascunde elemente pe diferite dimensiuni ale ecranului:
Exemplu:
/* Dacă dimensiunea ecranului este lată sau mai mică de 600px, ascunde elementul */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Modificați dimensiunea fontului cu interogări media
De asemenea, puteți utiliza interogări media pentru a modifica dimensiunea fontului (font size) unui element pe diferite dimensiuni ale ecranului:
Exemplu:
/* Dacă dimensiunea ecranului este mai mare de 600px, setați font-size <div> la 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Dacă dimensiunea ecranului este 600px lățime sau mai puțin, setați font-size <div> la 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}