Zahteve za medije so bile predstavljene v specifikaciji CSS3 z reševanjem starega glavobola vseh spletnih razvijalcev: izvornega CSS sloga, odvisno od tehničnih značilnosti določene naprave, in gladke spremembe slogov pri spreminjanju velikosti okna brskalnika.

CSS Media Answers: Adaptive for 5 minutes

V preprostih besedah ​​je medijska poizvedba oblika, ki vam omogoča, da izberete, katere sloge boste uporabili na strani, odvisno od določenih pogojev. Na primer, če je širina okna brskalnika večja od 1024px, prikažemo celoten meni, ki se razteza čez celotno širino strani, in če je manj kot 1024px - ga skrijemo (na primer z uporabo zaslona: none; lastnost) in namesto klike prikažemo gumb "burger menu". ki razkriva napreden seznam (prikaz: blok;)


Torej bi najlažji CSS zahtevek za medije izgledal takole: .menu {display: block;}
.burger-menu {display: none;} @vsi medij in (max-width: 1024px) {.menu {display: none;}
.burger-menu {display: block;}} Verbatim lahko preberete naslednje: vedno prikažete standardni meni in skrijete "burger menu", če pa je širina okna brskalnika manjša od 1024 pikslov (max-width: 1024px pomeni "do največje širine 1024px"), potem skrijemo stari meni in prikažemo novo. Lastnosti medijskih poizvedb bodo veljavne. To bo delovalo tako, ko odprete stran iz mobilnega telefona ali tabličnega računalnika, in če počasi zmanjšujete okno brskalnika, če ga obrnete v okno, se držite ene od strani in ga povlečete navzdol, kar zmanjša njegovo velikost.


Približno se lahko pojavi taka zahtevav urejevalniku: Če imate kratek pregled medijskih poizvedb v CSS, lahko varno izvajate in preizkušate njihovo delovanje na svojem spletnem mestu z namestitvijo poizvedb CSS medijev. Mobilne naprave bodo zlahka prepoznale vaše nove sloge, razen če pozabite določiti metaoznako pogleda, ki ga bomo podrobneje opisali spodaj. Vendar pa vam priporočamo, da preberete več o njihovih lastnostih, izvedete več o podpori brskalniku, najprej preberete mobilne naprave in namizje.

Podpora medijskim poizvedbam

Morda je to vprašanje ključnega pomena za tiste, ki resno razmišljajo o obiskovalcih svojega spletnega mesta in si prizadevajo, da bi bil na voljo vsem. Na srečo so medijske poizvedbe že dobro vzdrževane in dobro delujejo v sodobnih brskalnikih, od najbolj problematičnih Safari 4 in Internet Explorerja 9. Če morate varnostno kopirati Internet Explorer 8, se lahko na stran povežete s priljubljenim skriptom answer.js ali css3-mediaqueries.js. .

Namestimo prave CSS medije za mobilne naprave

Da bi vse delovalo po potrebi, je pomembno, da ne pozabite nastaviti oznake vidnega polja v naslovu dokumenta. To je narejeno na naslednji način: Tako bodo na mobilnih napravah z visoko gostoto slikovnih pik nastavljeni pravilni odnosi med podanim CSS-jem in dejanskim številom slikovnih pik ter bo vaše mesto razširjeno. In ni več vprašanja, zakaj mediji ne delujejo, ko je CSS pomanjšan.

Fina prilagodljivost

Glavna naloga medijskih poizvedb je prilagoditi spletno mesto, tj.vse oblike in velikosti zaslona. To lahko storite na dva načina. Označite poizvedbe CSS medijev z nekaj ključnimi točkami, ki se najpogosteje nanašajo na priljubljene oblike naprav. Na primer, najpreprostejša možnost je: 320px - telefoni, 768px - tablice, 1024px in več - prenosniki in osebni računalniki. In na vsaki od teh točk spremenite fiksno velikost blokov (kot tudi vse druge predmete, kot je video ali slika). Drugi način je, da naredimo gladek, "gumijast" prehod med več točkami, pri čemer elemente strani ne postavimo v toge dimenzije v slikovnih pikah, ampak v odstotke. V tem primeru, na primer pri 1024px in več, bo menijska vrstica zasedla 50% strani, gladko z velikostjo okna brskalnika do 768px, po tem pa se bo raztegnila na 100% okna brskalnika. Pomembno je omeniti tudi prvo in prvo namizje za mobilne naprave, ki se razlikujejo v pristopu k gradnji poizvedb. V prvem primeru najprej opišemo pravila za vse naprave, vključno z prenosnimi računalniki, osebnimi računalniki, nato pa postopoma gradimo spletno stran in odstranimo dodatne elemente strani. V drugem - najprej pripravimo postavitev spletnega mesta za mobilne naprave, nato pa pri razširitvi okna brskalnika in videzu prostega prostora v njih postavimo vsebino.

Trik iz čarovnika: točka medijev css - pravila v povezavi oznake!

Malo ljudi ve, vendar ne nujno pisati poizvedb neposredno v CSS stilih, lahko jih določite neposredno, ko povezujete datoteko, neposredno v oznako. Datoteka bo povezana glede na to, ali stran ustreza kriterijem, določenim v lastnostihmediji Na enak način lahko uvažate sloge iz drugih datotek z uporabo @import. V zaključku je treba opozoriti, da se veliko priljubljenih knjižnic uporablja pri razvoju spletnih mest, ki vsebujejo vgrajene analogne medijske poizvedbe. Ne smemo jih prezreti. Na primer, Bootstrap vam omogoča, da se naročite na razredne razrede HTML, zaradi katerih se bloki samodejno prilagajajo, ko spreminjate velikost zaslona, ​​vendar tega procesa ne boste mogli fleksibilno nadzorovati, mesto pa bo vedno togo razdeljeno na 12 stolpcev. Konec koncev, samo z njihovo pomočjo lahko ustvarite spletno stran, ki bo čim bolj prilagodljiva za prilagajanje napravam, medtem ko je popolnoma pod vašim nadzorom.