Sintaksa za upite za medijske širine i maksimalne širine
Odgovarajući web dizajn je pristup izgradnji web stranica gdje 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.
Upiti za medije slični su malim uvjetnim tvrdnjama unutar CSS datoteke vaše web-lokacije, što vam omogućuje postavljanje određenih CSS pravila koja će utjecati samo na ispunjenje određenog uvjeta - kao kad 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: body {font-size: 16px; }
- Sada biste trebali povećati veličinu fonta za većim zaslonima koji imaju dovoljno nekretnina da to učine. Ovo je mjesto gdje 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, možete dodati više medijskih upita za svaku veću veličinu, dodajući ih na svoj stilski list ovako:
@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 "maks-width", on 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 na Internet Exploreru. 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