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) { ….. }
@media screen and (max-width:375px) { ….. }

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).

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.

Dodaj komentar