Odgovarajući web dizajn je pristup izgradnji web stranica na kojima te stranice dinamički mijenjaju izgled i izgled na temelju veličine zaslona posjetitelja. Veliki ekrani mogu dobiti raspored prikladan za te veće zaslone, a manji uređaji, poput mobilnih telefona, mogu primati istu web stranicu oblikovanu na način prikladan za taj manji zaslon. Ovaj pristup pruža bolji korisnički doživljaj za sve korisnike i to čak može pomoći poboljšanju ranga tražilice. Važan dio responzivnog web dizajna je CSS Media Queries.
Medijski upiti slični su malim uvjetnim izjavama unutar CSS datoteke vaše web-lokacije, što vam omogućuje da postavite određena pravila CSS-a koja će stupiti na snagu samo kada se zadovolje određeni uvjet - kao kada je veličina zaslona iznad ili ispod određenih pragova.
Upiti medija na djelu
Kako upotrebljavate medijske upite na web mjestu? Ovdje je vrlo jednostavan primjer:
- Počet ćete s dobro strukturiranim HTML dokumentom bez ikakvih vizualnih stilova (to je ono za CSS)
- U vašoj CSS datoteci, počeli biste početi normalno oblikovanjem stranice i postavljanjem osnovice za izgled web stranice. Recimo da želite da veličina fonta stranice bude 16 piksela, možete napisati ovaj CSS:
tijelo {font-size: 16px; }
- Sada biste trebali povećati veličinu fonta za većim zaslonima koji imaju dovoljno nekretnina da to učine. Ovdje se upućuju medijski upiti. Započeli biste Media Query ovako:
@media zaslon i (min-width: 1000px) {}
- Ovo je sintaksa medijskog upita. Počinje s @media kako bi se utvrdio sam Upit za medije. Zatim postavite "vrstu medija", što je u ovom slučaju "zaslon". To se odnosi na zaslone stolnih računala, tablete, telefone itd. Konačno, Završetak medijske upite završava s "značajkom medija". U gornjem primjeru, to je "sredina širine: 1000px". To znači da će Media Query započeti s prikazima s minimalnom širinom od 1000 piksela.
- Nakon ovih elemenata medijskog upita dodajete otvaranje i zatvaranje kovrčavog držača sličnog onome što biste radili u bilo kojem normalnom CSS pravilu.
- Završni korak za upit medija je dodavanje pravila CSS-a koje želite primijeniti nakon što se taj uvjet ispuni. Dodate ove CSS pravila između kovrčastih zagrada koje čine Media Query, ovako:
@media zaslon i (min-širina: 1000px) {body {font-size: 20px; }
- Kada su uvjeti medijskog upita zadovoljeni (prozor preglednika je širok barem 1000 piksela), ovaj će CSS stil stupiti na snagu, mijenjajući veličinu fonta stranice od 16 piksela koji smo izvorno utvrdili na novu vrijednost od 20 piksela.
Dodavanje više stilova
Možete postaviti što je moguće više CSS pravila unutar ovog medijskog upita kako je potrebno za prilagodbu vizualnog izgleda vaše web stranice. Na primjer, ako želite povećati veličinu fonta na 20 piksela, ali i promijeniti boju svih odlomaka na crno (# 000000), možete dodati sljedeće:
@media zaslon i (min-širina: 1000px) {body {font-size: 20px; } p {boja: # 000000; }}
Dodavanje više medijskih upita
Osim toga, za sve veće veličine možete dodati više medijskih upita, dodajući ih na svoj list stilova kao što je ovaj:
@media zaslon i (min-širina: 1000px) {body {font-size: 20px; } p {boja: # 000000; {} @media zaslon i (min-širina: 1400px) {body {font-size: 24px; }}
Prvi medijski upiti započeli bi širok 1000 piksela, mijenjajući veličinu fonta na 20 piksela. Zatim, kada je preglednik bio iznad 1400 piksela, veličina fonta ponovno će se promijeniti na 24 piksela. Možete dodati što je više potrebnih medijskih upita za vašu web stranicu.
Min-Width i Max-Width
Postoje dva načina pisanja medijskih upita - pomoću "min-width" ili "max-width". Do sada smo vidjeli "min-width" u akciji. To uzrokuje da medijski upiti stupaju na snagu nakon što je preglednik dostigao barem tu minimalnu širinu. Tako se upit koji koristi "min-width: 1000px" primjenjuje kada je preglednik širok barem 1000 piksela. Taj stil medijskog upita upotrebljava se prilikom izgradnje web-lokacije na način koji je "mobilan prvi".
Ako koristite "max-širinu", to radi na suprotan način. Upiti medija "max-width: 1000px" primjenjivat će se kada se preglednik pada ispod te veličine.
Što se tiče starijih preglednika
Jedan od izazova s medijskim upitima jest njihov nedostatak podrške u starijim verzijama programa Internet Explorer. Srećom, dostupni su polifilovi koji mogu zakrpati podršku za medijske upite u tim starijim preglednicima, omogućujući vam da ih upotrebljavate na web-lokacijama iako istodobno osiguravate da prikazivanje tog web-mjesta ne izgleda slomljeno u starijem pregledniku.
Uredio Jeremy Girard na 1/24/17
7
