Upiti za medije

Medijski upiti značajka su CSS koji omogućuju web stranica sadržaj prilagoditi različitim veličinama i rezolucijama zaslona. Oni su temeljni dio responzivni web dizajn a koriste se za prilagodbu izgleda web stranica za više uređaja.

Medijski upiti mogu se umetnuti unutar web stranica HTML ili uključeni u zasebnu .CSS datoteka na koju upućuje web stranica. Ispod je primjer jednostavnog medijskog upita:

zaslon @media i (maksimalna širina: 768px)
{
zaglavlje {visina: 70px; }
članak {veličina fonta: 14px; }
img {maksimalna širina: 480px; }
}

Gornji upit za medije aktivira se ako korisnik preglednik prozor je 768 piksela široka ili manja. To se može dogoditi ako smanjite prozor na stolnom računalu ili ako koristite mobilni uređaj, kao što je tableta, za prikaz web stranice.

U responzivnom web dizajnu, medijski upiti djeluju kao filtri za različite veličine zaslona. Kao i svi moduli unutar kaskadnog lista stilova, oni koji se pojavljuju dalje na popisu nadjačavaju one iznad njih. Stoga je zadani stilovi se obično definiraju prvo u CSS dokumentu, a nakon toga slijede medijski upiti za različite veličine zaslona. Na primjer, stilovi radne površine mogu se prvo definirati, nakon čega slijedi medijski upit sa stilovima za korisnike tableta, a zatim medijski upit dizajniran za smartphone korisnika. Stilovi se također mogu definirati u suprotnom redoslijedu, što se smatra razvojem prije svega za mobilne uređaje.

Dok min širine je daleko najčešća značajka koja se koristi u medijskim upitima, a dostupne su i mnoge druge. Primjeri uključuju min-širina uređaja, min-visina uređaja, aspekt omjer, max-indeks boja, maksimalna razlučivost, orijentacijai rezolucija. rezolucija vrijednost, na primjer, može se koristiti za otkrivanje HiDPI prikaza (kao što je mrežnica se prikazuje) i učitajte grafiku visoke rezolucije umjesto standardnih slika.