Zahtjevi medija uvedeni su u CSS3 specifikaciji rješavanjem stare glavobolje svih web programera: izvornog CSS stila upravljanja, ovisno o tehničkim karakteristikama određenog uređaja, i glatke promjene stilova pri promjeni veličine prozora preglednika.
CSS Media Answers: Prilagodljiv za 5 minuta
Jednostavnim riječima, medijski upit je dizajn koji vam omogućuje da odaberete koje stilove ćete koristiti na stranici, ovisno o određenim uvjetima. Na primjer, ako je širina prozora preglednika veća od 1024px, prikazujemo cijeli izbornik koji se proteže cijelom širinom stranice, a ako je manji od 1024px - skrivamo ga (na primjer, upotrebom zaslona: none; svojstvo) i umjesto toga prikazujemo gumb "burger menu" umjesto klike. koji otkriva sofisticirani popis (prikaz: blok;)
Dakle, najlakši medijski CSS zahtjev bi izgledao ovako: .menu {display: block;}
.burger-menu {display: none;} @svi mediji i (max-width: 1024px) {.menu {display: none;} .burger-menu {display: block;}} Verbatim možete pročitati sljedeće: uvijek prikazati standardni izbornik i sakriti "burger izbornik", ali ako je širina prozora preglednika manja od 1024 piksela (max-width: 1024px znači "do maksimalne širine 1024px"), onda sakrijemo stari izbornik i prikazujemo novi. Svojstva medijskih upita bit će valjana. To će funkcionirati i kada otvorite stranicu s mobilnog telefona ili tableta, a ako polako smanjite prozor preglednika, ako ga okrenemo u prozor, stišćući jednu stranu i povlačimo je dolje, smanjujući njegovu veličinu.
Može izgledati približno takav zahtjevu uredniku:
Ako imate kratak pregled medijskih upita u CSS-u, možete sigurno vježbati i testirati njihovu izvedbu na vlastitoj web-lokaciji instaliranjem CSS-ovih upita medija na njega. Mobilni uređaji također će lako prepoznati vaše nove stilove, osim ako zaboravite odrediti metaoznaku iz prikaza, o čemu ćemo detaljnije raspravljati u nastavku. Međutim, preporučujemo da pročitate više o njihovim svojstvima, saznate više o podršci preglednika, prvo razmislite o mobilnim uređajima i radnoj površini.
Podrška medijskim upitima
Možda je ovo pitanje ključno za one koji ozbiljno razmišljaju o posjetiteljima svoje stranice i nastoje ga učiniti široko dostupnima svima. Srećom, medijski upiti su već dobro održavani i dobro funkcioniraju u modernim preglednicima, od najproblematičnijih Safari 4 i Internet Explorer 9. Ako morate izraditi sigurnosnu kopiju Internet Explorera 8, možete se povezati na stranicu popularnog answer.js ili css3-mediaqueries.js skripte. ,
Instaliramo odgovarajuće CSS medije za mobilne uređaje
Kako bi sve radilo po potrebi, važno je ne zaboraviti postaviti oznaku okvira za prikaz u naslovu dokumenta. To se radi na sljedeći način: Na taj način, na mobilnim uređajima s visokom gustoćom piksela, postavit će se ispravan odnos između navedenog CSS-a i stvarnog broja piksela, a vaše će web-mjesto biti skalirano. I više ne postoji pitanje zašto mediji ne rade kada je CSS zumiran.
Fina prilagodljivost
Glavni zadatak medijskih upita je da učini site prilagodljivim, tj. Da ga "nauči" da se automatski prilagođavabilo koje formate i veličine zaslona. To možete učiniti na dva načina. Označite CSS upite medija nekim ključnim točkama koje se najčešće odnose na popularne formate uređaja. Na primjer, najjednostavnija opcija je: 320px - telefoni, 768px - tableti, 1024px i novije - prijenosna računala i osobna računala. I na svakoj od tih točaka promijenite fiksnu veličinu blokova (kao i sve druge objekte kao što su video ili slike). Drugi način je napraviti glatki, "gumeni" prijelaz između nekoliko točaka, postavljajući elemente stranice ne krutim dimenzijama u pikselima, već postocima. U ovom slučaju, na primjer, na 1024px i više, traka izbornika zauzima 50% stranice, glatko s veličinom prozora preglednika do 768px, a nakon toga - proteže se na svih 100% prozora preglednika.
Važno je također spomenuti prvi mobilni i desktop prvi, koji se razlikuju u pristupu izradi upita. U prvom slučaju, najprije opisujemo pravila za sve uređaje, uključujući prijenosna računala, osobna računala, a zatim postupno gradimo web-lokaciju i uklanjamo dodatne elemente stranice. U drugom - najprije pripremamo izgled stranice za mobilne uređaje, a zatim pri proširenju prozora preglednika i izgledu slobodnog prostora u njih stavljamo sadržaj.
Trik iz čarobnjaka: point media css - pravila u oznaci veze!
Malo ljudi zna, ali ne mora nužno pisati upite izravno u CSS stilovima, možete ih navesti izravno kada povezujete datoteku, izravno u oznaku. Datoteka će biti povezana ovisno o tome ispunjava li stranica kriterije navedene u svojstvumediji. Možete koristiti isti način pri uvozu stilova iz drugih datoteka koristeći @import. U zaključku, treba napomenuti da se mnoge popularne knjižnice koriste u razvoju stranica koje sadrže ugrađene analoge medijskih upita. Ne treba ih ignorirati. Na primjer, Bootstrap vam omogućuje pretplatu na klasu HTML klase, zahvaljujući kojoj se blokovi automatski prilagođavaju kada promijenite veličinu zaslona, ali nećete moći fleksibilno kontrolirati taj proces, a web-lokacija će uvijek biti kruto razbijena na 12 stupaca. Uostalom, samo uz njihovu pomoć možete stvoriti stranicu koja će biti što fleksibilnija za prilagodbu bilo kojem uređaju, dok je potpuno pod vašom kontrolom.
