Frontend & WordPress kurs

263 lekcije

HTML

CSS

Responsive

javaScript

SASS Preprocesor

Wordpress CMS

Database SQL

Wordpress Custom Theme

Introduction to Responsive Concept

Na ovom predavanju objasniću kako funkcioniše responsive koncept.

Objasniću 2 glavne stvari:

  • meta name="viewport"
  • @media()

meta name="viewport" je meta tag koji nam omogućava da manipulišemo prikazom izgleda sajta na mobilnom telefonu. Sa ovim tagom podešavamo da širina ekrana prikaza kao fizička širina ekrana mobilnog uredjaja. Ukoliko ovaj meta tag nije podešen sadržaj se zumira u minus da bi ceo sadržaj mogao da stane u prikaz ekrana, pa korisnik ukoliko zeli da pročita mora da zumira prikaz da bi jasno mogao da vidi sadržaj. Takodje ovim tagom se podeßava i mogućnost zumiranja sadržaja. Na slici ispod mozete videti kako izgleda websajt na mobilnom uredjaju  bez i sa podešenim meta tagom.

 Bez podešenog meta tag-a                              Sa podešenim meta tag-om

Slike preuzete sa https://www.w3schools.com/css/css_rwd_viewport.asp

@media je CSS property koji nam omogućava da u okviru njega definišemo blok CSS koda koji će se  primeniti na definisanim rezolucijama. U izradi responsive sajta vazi pravilo MOBILE FIRST zbog toda se u okviru @media definise:

@media(min-width: 500px){

}

ovaj kod nam govori da CSS koji se definise u vitičastim zagradama primeniti samo na ekranima čija je rezolucija veća od 500px, dok se za manje ekrane neće primeniti.

Takodje možete definisati i samo odredjeni deo opsega rezolucija definisanjem

 

@media(min-width-500px) and (max-width:1000px){

}

ovaj kod nam govori da CSS koji se definise u vitičastim zagradama primeniti samo na ekranima čija je rezolucija veća od 500px i manja od 1000px, dok se za rezolucije manje od 500px i veće od 1000px CSS nece primenti.

Kroz praktičan primer mini sajta provežbaćemo responsive koncept.

Korišćenjem ovog sajta prihvatate upotrebu kolačića. Saznajte više