responsiv dizajn

Media upiti

@media upiti se koriste pri definiciji CSS 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 izgled internet stranice za prikaz na ekranima različitih dimenzija (monitor, mobilni telefon, tablet, vertikalno postavljen ili horizontalno).

Primer

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;
 }
}

Leave a Reply

Your email address will not be published. Required fields are marked *