Kako umetnuti medijske zahtjeve? CSS - prilagodljivost u tri koraka

Mediji upiti su uvedene u CSS3 specifikacija, odlučujući stari glavobolju web-programeri: izvorni kontrolu CSS stilova, ovisno o specifikacijama pojedinog uređaja, te glatku promjenu stila kada je veličina prozora preglednika.

Upiti za medije u CSS-u: 5 minuta prilagodljivi

U jednostavnim riječima, upit mediji - ovaj dizajn, dopuštajući, pod određenim uvjetima, da odaberete koji stil koristiti na stranici. Na primjer, ako je širina prozora preglednika više od 1024 p, pokazali smo kompletan meni, protežu cijelom širinom stranice, a ako je manje od 1024 p - sakriti (primjerice, pomoću prikaza vlasništvu: none;) i pokazati umjesto na „izbornik hamburger”, kada se pritisne na kojem se prikazuje elegantan popis (prikaz: blok-)

Dakle, najjednostavniji medijski CSS upit izgledat će ovako:

.izbornik {display: block-}
.Burger-izbornik { prikaz: none; }

@media sve i (max-width: 1024px) {

.izbornik { prikaz: none; }
.burger-menu {display: block-}

}

Doslovno, možete pročitati ovo: mi uvijek pokazati standardni izbornik i sakriti „izbornik hamburger”, ali kad je prozor preglednika manja od 1024 piksela (maks širine: 1024 znači „do maksimalne širine 1024 p”), a zatim ćemo sakriti stare izbornicima i emisiju novi. Nekretnine u upitu medija će ubiti aktivan. To će raditi kao kada otvorite stranicu s mobilnog telefona ili tableta, a uz postupno smanjenje u prozoru preglednika, kada smo ga pretvoriti u okvir i zgrabi jednu od strana i povući smanjujući njegovu veličinu.

Otprilike tako da zahtjev može izgledati u vašem uredniku:

Ako imate dovoljno kratkog pregleda medijskih upita u CSS-u, možete jednostavno prakticirati i provjeriti njihovo djelovanje na vlastitoj web-lokaciji tako što ćete instalirati na njega CSS medijski upiti. Mobilni uređaji lako prepoznaju vaše nove stilove, ako ne zaboravite navesti oznaku metapodataka, o čemu ćemo detaljnije raspravljati. Međutim, preporučujemo da saznate više o svojim svojstvima, saznajte više o podršci preglednika, prvo razmotrite mobilni uređaj i radnu površinu.

Podrška za medijske upite

Možda je to ključno pitanje za one koji su ozbiljno razmišljati o posjetiteljima svoje stranice i nastoji da bude što je moguće dostupnijima za sve. Srećom, medijskih upita su održavani vrlo dobro i raditi u modernim preglednicima, počevši od najproblematičnijih Safari 4 i Internet Explorer 9. Ako zaista imati podršku za Internet Explorer 8, možete spojiti na popularne stranice ili skripta respond.js CSS3-mediaqueries. JS.

Instaliranje ispravnog medija CSS za mobilne uređaje

Da bi sve radilo kako treba, važno je ne zaboraviti postaviti ga u zaglavlje oznaka vlasničkog pregleda dokumenta. To se radi kako slijedi:

Na zaslonima mobilnih uređaja s visokom gustoćom piksela postavit će se odgovarajući omjer između navedenog u CSS-u i stvarnog broja piksela, a vaša će stranica biti skalirana. I više nema pitanja, zašto mediji ne rade s CSS-om.

Elegantna prilagodljivost

Glavni zadatak medijskih upita je da se stranica prilagodljivo, tj. "Poučava" automatski kako bi se prilagodila svim formatima i veličinama zaslona. To se može učiniti na dva načina.

Odrediti multimedijske CSS zahtjeve kao određene ključne točke, koje se najčešće odnose na popularne formate uređaja. Na primjer, najjednostavnija verzija: 320px - telefoni, 768px - tableti, 1024px i više - prijenosna računala i osobna računala. I na svakoj od tih točaka izmijenite fiksne veličine blokova (kao i sve ostale objekte, kao što su video ili slike).

Drugi način je napraviti glatku, "gumenu" prijelaz između nekoliko točaka, navodeći elemente stranice nisu krute dimenzije u pikselima, već u postocima. U tom slučaju, na primjer, na 1024 piksela i više, blok izbornika zauzimat će 50% stranice, glatko se smanjiti zajedno s veličinom prozora preglednika na 768 piksela, a zatim - da se proteže na 100% prikaza.

Isto je vrijedno spomenuti i mobilne i desktop prve, što se razlikuje od pristupa upitu zgrade. U prvom slučaju najprije opisujemo pravila za sve uređaje, uključujući prijenosna računala i osobna računala, a zatim postupno obnavljamo web mjesto i uklonimo dodatne elemente stranice. U drugom - prvo pripremamo izgled web-lokacije za mobilne uređaje, a zatim proširujemo prozor preglednika i izgled slobodnog prostora, a preostali sadržaj stavljamo u njih.

Izigrati majstora: odredite medije css - pravila u linku oznake!

Malo je znati, ali nije potrebno upisivati ​​upite izravno u CSS stilove, možete ih izravno odrediti kada spojite datoteku izravno u oznaku . Datoteka će biti povezana ovisno o tome ispunjava li stranica kriterije navedene u svojstvu medija. Slično tome, možete ga koristiti pri uvozu stilova iz drugih datoteka pomoću @import.

U zaključku, to je napomenuti da su mnogi od popularnih biblioteke koje koristi za razvoj web stranice sadrže ugrađeni u medijskim upitima kolegama. Ne biste ih trebali zanemariti. Na primjer, bootstrap omogućuje da se registriraju u HTML-kod klase, kroz koje jedinice će se automatski podesiti kada promijenite veličinu zaslona, ​​ali nećete biti u mogućnosti da se fleksibilno kontrolirati proces, a stranica će uvijek biti strogo podijeljeni u 12 stupaca. To je samo uz njihovu pomoć, možete napraviti web stranicu koja će se povećala fleksibilnost da se prilagode bilo kojeg uređaja, dok se u potpunosti pod vašom kontrolom.