Interogări media CSS - exemple. Galerie de imagini flexibile. Site web flexibil. Orientare: Portret / Peisaj. Lățimea minimă până la lățimea maximă.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.
Site web flexibil
Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.
Orientare: Portret / Peisaj
Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):
Exemplu:
Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Lățimea minimă până la lățimea maximă (Min Width to Max Width)
Puteți utiliza, de asemenea, valorile (max-width: ..) and (min-width: ..) pentru a seta o lățime minimă și o lățime maximă.
De exemplu, când lățimea browserului este cuprinsă între 600 și 900px, schimbați aspectul unui element <div>:
Exemplu:
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Folosind o valoare suplimentară: În exemplul de mai jos, adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR):Exemplu:
/* Când lățimea este între 600px și 900px OR peste 1100px - schimbați aspectul <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}