Web dizajn primeri

MEDIJA UPITI - CSS

@media upiti se koriste pri definiciji stilova prilagođenih različitim uređajima i meidijima. Uz dodatak određenih osobina, kao što su širina, orjentacija, rezolucija lako se može definisati dizajn za prikaz sadržaja na mobilnom telefonu, tabletu (vertikalno postavljenom ili horizontalno), laptopu, desktop računaru ili televizoru.

Primer 1

U nastavku je primer koda koji menja boju pozadine stranice u zavisnosti od širine prostora za prikaz sadržaja. Prepoznaje 3 različite granične vrednosti za širinu.

Uz korišćenje ključne reči @media,

reč screen određuje da se podešavanje odnosi na prikaz na ekranu (postoje još: print, speech, all)
max-width utiče na to da se proverava širina prikaza (još neke od mnogobrojnih osobina su: orientation, resolution, color ...)
and povezuje uslove,
a only sprečava da dođe do greške u starijim brauzerima koji ne prepoznaju @media pravila.

Redosled u kojima su data pravila je bitan.

body{
background-color:#ffffff;
}

@media only screen and (max-width: 1024px){
body{
   background-color:#0099ff;
}
}

@media only screen and (max-width: 768px){
body{
  background-color:#99cc00;
}
}

@media only screen and (max-width: 480px){
body{
  background-color:#ff6699;
}
}

Test koda

Primer 2

Meidia upit u kombinaciji sa picture tagom. Promena fotografije u zavisnosti da li je orjentacija ekrana uspravna ili položena.

Test koda

Primer 3

Media upit je moguće koristiti i kod povezivanja stranice sa css fajlom. U primeru se učitavaju različiti fajlovi u zavisnosti od širine ekrana.

Test koda