Web Design Responsiv - Imagini. Imagini diferite pentru dispozitive diferite. Interogarea media min-device-width.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
O imagine mare poate fi perfectă pe un ecran mare al unui computer, dar inutilă pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să o măriți în jos? Pentru a reduce încărcarea sau pentru orice alte motive, puteți utiliza interogări media (media queries) pentru a afișa imagini diferite pe dispozitive diferite.
Iată o imagine mare și una mai mică care vor fi afișate pe dispozitive diferite:
Exemplu:
/* Pentru width mai mic de 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* Pentru width 400px și mai mare: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Puteți utiliza interogarea media (media query) min-device-width, în loc de min-width, care verifică lățimea dispozitivului, în loc de lățimea browserului. Atunci imaginea nu se va schimba când redimensionați fereastra browserului:Exemplu:
/* Pentru dispozitive mai mici de 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* Pentru dispozitive 400px și mai mari: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}