Sintaksa za medijske upite min-širine i max-širine
Odgovarajući web dizajn je pristup izgradnji web stranica, gdje te stranice mogu dinamički promijeniti njihov izgled i izgled zasnovan na veličini ekrana posetilaca . Veliki ekrani mogu dobiti raspored koji odgovara onim većim ekranima, dok manji uređaji, kao što su mobilni telefoni, mogu dobiti isti web sajt formatiran na način koji odgovara tom malom ekranu. Ovaj pristup pruža bolje korisničko iskustvo za sve korisnike i može čak pomoći u poboljšanju ranga pretraživača . Važan deo odgovarajućeg web dizajna je CSS Media Queries.
Media Queries su kao mali uslovni izvodi unutar CSS datoteke vaše web stranice, omogućavajući vam da postavite određena pravila CSS-a koja će uticati samo na određeno stanje - kao kada je veličina ekrana iznad ili ispod određenih pragova.
Media Queries in Action
Pa kako koristite medijske upite na veb lokaciji? Evo vrlo jednostavan primer:
- Počeli bi sa dobro struktuiranim HTML dokumentom bez ikakvih vizuelnih stilova (to je ono za šta je CSS)
- U vašoj CSS datoteci, počeli ste kako obično radite tako što ćete stajali na stranici i postaviti osnovnu liniju kako će izgledati web stranica. Recite da želite da veličina fonta stranice bude 16 piksela, možete napisati ovaj CSS: body {font-size: 16px; }
- Sada, možda ćete želeti da povećate veličinu fonta za veće ekrane koji imaju dovoljno nepokretnosti za to. Ovde se pokreću Media Queries. Počeli biste Media Query ovako: @media ekran i (min-width: 1000px) {}
- Ovo je sintaksa medijskog upita. Počinje sa @media da ustanovi sam Media Query. Zatim postavite "tip medija", koji je u ovom slučaju "ekran". Ovo se odnosi na ekrane desktop računara, tablete, telefone itd. Konačno, medijski upit završite pomoću funkcije "medija". U našem prethodnom primeru, to je "srednja širina: 1000px". To znači da će Media Query proći za ekrane sa širinom širine od 1000 piksela.
- Posle ovih elemenata Media Query-a, dodate otvorenu i zatvarajuću zavojnu sličicu sličnu onoj što biste uradili u bilo kom normalnom CSS pravilu.
- Poslednji korak u medijskom upitu je da dodate CSS pravila koja želite da primenite kada se taj uslov ispuni. Dodate ova pravila CSS-a između skrivenih kočnica koje čine Media Query, kao što je: @media ekran i (min-width: 1000px) {body {font-size: 20px; }
- Kada su ispunjeni uslovi Media Query (prozor pregledača je širine najmanje 1000 piksela), ovaj CSS stil će stupiti na snagu, mijenjati veličinu fonta našeg sajta sa 16 piksela koje smo originalno uspostavili na našu novu vrijednost od 20 piksela.
Dodavanje više stilova
Možete postaviti što više CSS pravila unutar ovog Media Query-a koliko je potrebno kako biste prilagodili vizuelni izgled vašeg veb sajta. Na primer, ako želite ne samo da povećate veličinu slova na 20 piksela, već i da promenite boju svih stavki u crnu (# 000000), možete dodati ovo:
@media ekran i (min-širina: 1000px) {body {font-size: 20px; } p {boja: # 000000; }}Dodavanje dodatnih medijskih upita
Pored toga, možete dodati još medijskih upita za svaku veću veličinu, dodajući ih u svoj stilski stil ovako:
@media ekran i (min-širina: 1000px) {body {font-size: 20px; } p {boja: # 000000; {} @media ekran i (min-širina: 1400px) {body {font-size: 24px; }}Prvi medijski upiti bi se šutirali širine 1000 piksela, mijenjajući veličinu fonta na 20 piksela. Zatim, kada je pregledač bio iznad 1400 piksela, veličina fonta bi se ponovo promenila na 24 piksela. Možete dodati što više medijskih upita po potrebi za vašu određenu web stranicu.
Minimalna širina i maksimalna širina
Obično postoje dva načina za pisanje medijskih upita - koristeći "min-width" ili "max-width". Do sada smo videli "min-širinu" u akciji. Ovo dovodi do toga da Media Queries stupi na snagu kada pregledač dostigne bar minimalnu širinu. Dakle, upit koji koristi "min-width: 1000px" primjenjuje se kada je pretraživač širok najmanje 1000 piksela. Ovaj stil medijskog upita se koristi kada gradite lokaciju na "mobilni prvi" način.
Ako koristite "maksimalnu širinu", radi na suprotan način. Media Query od "max-width: 1000px" bi se primijenio kada se pretraživač pada ispod ove veličine.
Što se tiče starijih pretraživača
Jedan izazov sa Media Queries-ima je nedostatak podrške u starijim verzijama Internet Explorer-a. Srećom, na raspolaganju su dostupne polifilije koje mogu da dopune podršku za Media Queries u onim starijim pregledačima, omogućavajući vam da ih koristite na web stranicama danas, dok još uvijek osiguravate da ekran ove stranice ne izgleda slomljen u starijim softverima pretraživača.
Uredio Jeremy Girard na 1/24/17