Web Design Responsiv - Interogări media. 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 (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;
}
}