Blog

Responsiv dizajn – bitni kodovi

imac-5k-retina-mockup-2

Responsiv dizajn – danas standard u izradi veb sajtova, podrazumeva da veb sajt bude prilagodljiv svim poznatim rezolucijama uredjaja koji pristupaju internetu. Bilo da sajtu pristupate preko telefona ili tableta sajt uvek treba da bude jasno vidljiv na pomenutim uredjajima.

Kako bi to bilo moguće, potrebno je prvo ispuniti sledeći uslov a to je da se u head delu sajta unese sledeći kod:

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

Nakon toga se mogu unositi sledeći medija query kodovi koji važe za rezolucije navedene u samim zagradama, pogledajte primer:

CSS kod za široke ekrane:

@media screen and (min-width:1024px) and (max-width:1260px) { …… }
@media screen and (min-width:1261px) and (max-width:1440px) { …… }

CSS kod za tablet uredjaje:

@media screen and (min-width:768px) and (max-width:1023px) { …… }

CSS kod za mobilne uredjaje:

@media screen and (max-width:767px) { ….. }

Testiranje responsiv dizajna možete proveriti prečicom na tastaturi F12 ili desnim klikom miša na bilo koje polje na sajtu a zatim klikom na inspect element (slika 01).

responsiv dizajn
Slika 01

Još jedan od načina za proveru responsiva jeste i sajt ami.responsivedesign.is gde je potrebno samo da u polje uneste link a sajt će testiranje za responsive uraditi sam.

 

Ostavite odgovor

Vaša email adresa neće biti objavljena. Označena polja su obavezna *

Ovo veb mesto koristi Akismet kako bi smanjilo nepoželjne. Saznajte kako se vaši komentari obrađuju.