Kako vstaviti medijske zahteve? CSS - prilagodljivost v treh korakih

Medijske poizvedbe so bile uvedene v specifikacijah CSS3, odločanje staro glavobol spletnih razvijalcev: materni nadzor CSS stilov, odvisno od specifikacij posebno napravo in nemoteno spremembo stila, ko je velikost okna brskalnika.

Media poizvedbe v CSS: 5 minut prilagodljivo

V preprostih besedah ​​je medijska poizvedba dizajn, ki vam omogoča, odvisno od določenih pogojev, izbrati katere sloge uporabiti na strani. Na primer, če je širina okna brskalnika nad 1024px, bomo pokazali popolno meni, raztezajo na celotno širino strani, in če je manj kot 1024px - skriti (na primer, z uporabo zaslona nepremičnine: none;) in pokazati namesto tega "meni burger", ob kliku na katerem je prikazan eleganten seznam (prikaz: blok-)

Torej bo najpreprostejša poizvedba CSS po vsebini izgledala takole:

.meni {display: block-}
.burger-menu { prikaz: ni; }

@media vse in (max-širina: 1024px) {

.meni { prikaz: ni; }
.burger-menu {display: block-}

}

Dobesedno, lahko to glasi: smo vedno kažejo standardni meni in skriti "menu burger", če pa je okno brskalnika je manjša od 1024 pik (max-širina: 1024px pomeni "do maksimalne širine 1024px"), nato pa smo skriti stare menije in kažejo novo. Lastnosti v medijski poizvedbi bodo prepisale obstoječe. To bo delovalo kot takrat, ko odprete stran z mobilnim telefonom ali tabličnim računalnikom, in s postopnim zmanjšanjem v oknu brskalnika, ko smo ga zavijemo v škatlo in prijel enega izmed stranic in potegnite z zmanjšanjem njegove velikosti.

Približno tako lahko zahteva pogleda v urejevalniku:

Če imate dovolj kratek pregled medijskih poizvedb v CSS, lahko brez težav vadite in preverite njihovo dejanje na svojem spletnem mestu, tako da ga namestite Medijske poizvedbe CSS. Mobilne naprave prav tako zlahka prepoznajo vaše nove sloge, če ne pozabite določiti pogleda v meta-tag, o čemer bomo podrobneje razpravljali. Vendar priporočamo, da izveste več o svojih lastnostih, izvedete več o podpori brskalnika, najprej pretehtate mobilni telefon in namizje.

Podpora za medijske poizvedbe

Morda je to vprašanje ključnega pomena za tiste, ki resno razmišljajo o obiskovalcih svoje spletne strani in si prizadevajo, da bodo čim bolj dostopni vsem. Na srečo so se ohranila medijske poizvedbe zelo dobro in deluje v redu v sodobnih brskalnikov, začenši z najbolj problematično Safari 4 in Internet Explorer 9. Če imate res za podporo Internet Explorer 8, ki jih lahko povežete s priljubljeno stran ali skript respond.js CSS3-mediaqueries. js.

Namestitev pravilnega nosilca CSS za mobilne naprave

Da bi vse lahko delovalo tako, kot je potrebno, je pomembno, da ga ne pozabite nastaviti v glavi oznaka pogleda dokumenta. To se naredi takole:

Tako bodo na zaslonih mobilnih naprav z visoko gostoto slikovnih pik nastavljeni pravilno razmerje med navedenim v CSS in dejanskim številom pikslov in vaše spletno mesto bo pomanjšano. In ni več vprašanje, zakaj mediji ne delujejo s CSS cramming.

Elegantna prilagodljivost

Glavna naloga medijskih poizvedb je, da postane spletno mesto prilagodljivo, to pomeni, da ga "samodejno poučuje", da se prilagodi vsem formatom in velikostim zaslona. To je mogoče storiti na dva načina.

Če želite določiti medijske zahteve za CSS kot nekatere ključne točke, ki se najpogosteje nanašajo na priljubljene oblike naprav. Na primer, najpreprostejša različica: 320 slikovnih telefonov, 768 slikovnih pik, 1024 slikovnih pik in več - prenosni računalniki in osebni računalniki. Na vsaki od teh točk spremenite fiksne velikosti blokov (kot tudi vse druge predmete, kot so video ali slike).

Druga možnost je, da naredite gladek, "gumijasti" prehod med več točkami, ki določajo elemente strani, niso toge dimenzije v slikovnih pikah, ampak v odstotkih. V tem primeru, na primer, z 1024 pik in več, bo menijski blok zasedel 50% strani, se bo gladko zmanjšal skupaj z velikostjo okna brskalnika na 768 slikovnih pik, nato pa se bo raztegnil na 100% pogleda.

Prav tako je treba najprej omeniti prvi mobilni telefon in namizje, ki se razlikuje od pristopa do gradbenih poizvedb. V prvem primeru najprej opisujemo pravila za vse naprave, vključno z prenosnimi računalniki in osebnimi računalniki, nato pa postopoma obnovite spletno mesto in odstranite dodatne elemente strani. V drugem - najprej pripravimo postavitev spletnega mesta za mobilne naprave, nato pa, ko razširimo okno brskalnika in videz prostega prostora, v njih položimo preostalo vsebino.

Trik glavarja: podajte medijske css-pravila v povezavi z oznako!

Manj ve, vendar ni treba pisati poizvedb neposredno v slogih CSS, jih lahko neposredno določite, ko povežete datoteko neposredno v oznako . Datoteka bo povezana glede na to, ali se stran ujema z merili, določenimi v lastnostih medijev. Podobno ga lahko uporabite tudi, če uvozite sloge iz drugih datotek z uporabo @import.

Na koncu je treba opozoriti, da številne priljubljene knjižnice, ki se uporabljajo pri razvoju spletnih mest, vsebujejo vgrajene analoge medijskih poizvedb. Ne smete jih zanemarjati. Na primer, Bootstrap vam omogoča, da se registrirajo v HTML-kodo razredov, s pomočjo katerih bodo enote samodejno prilagodi, ko spremenite velikost zaslona, ​​vendar ne boste mogli prožno nadzor nad procesom, in stran se bo vedno strogo razdeljena na 12 stolpcev. Konec koncev, samo z njihovo pomočjo lahko ustvarite spletno mesto, ki bo čim bolj fleksibilno, da se prilagodi katerikoli napravi, medtem ko je popolnoma pod vašim nadzorom.