CSS medijski upiti: opis, opis i opis korak po korak

U jednom trenutku, oni koji su posjetili web stranice s pametnih telefona i sličnih mobilnih uređaja uzrokovali su samo smijeh. Mnogi jednostavno ne razumiju zašto je to potrebno, jer postoje takva prikladna stacionarna računala! Ili, u najgorem slučaju, prijenosna računala. Osim toga, mobilni internet je tada bio skup.

Vrijeme je prošlo. Internet je bio jeftin. Na tržištu je izašlo više telefona i tableta. Nekoliko godina poslije, vlasnici popularnih mjesta zbunili su glavu. Prema statistikama pokazalo se da su njihovi resursi češće posjećeni od pametnih telefona nego od stacionarnih računala!

Tih dana web-lokacije nisu optimizirane za gledanje s mobilnih uređaja. Ideteći sa starog resursa s telefona, trebali biste biti zadovoljni malim slovima, malim izbornicima i neugodnim gumbima.

Pojavljivanje CSS medijskih upita

Bilo je potrebno napraviti resurse tako da su izgledali dobro kad su pregledani s bilo kojeg zaslona. Prvo, proširila se praksa stvaranja odvojene web stranice za svaku veličinu. Na primjer, posjetitelj koji je koristio mobilni telefon dobio je jedan resurs i onaj koji je "sjeo" s računala - s druge strane. Ali bilo je dugo, skupo i neugodno.

Zatim su došli CSS3 medijski upiti. Uz njihovu pomoć, jednostavna prilika za implementaciju dinamičnog dizajna.

Što je dinamičan dizajn?

Ovaj pojam se koristi ako se izgled resursa mijenja ovisno o veličini zaslona na kojem se pregledava. Kako razumjeti ovo? Jednostavno.

Zamislite da imate web stranicu. Na vrhu je navigacijski izbornik. Horizontalna. Proširuje cijelu širinu stranice. Ispod je blok s kontaktnim informacijama. Telefon i adresa također se šire preko dva bloka i horizontalno su postavljeni jedan pored drugog. Pod ovim blokom glavni je sadržaj, a bočna traka nalazi se lijevo ili desno. Ispod, kao i obično, podnožje.

Ovo je "klasičan" izgled komponenti. Izuzetno je za osobno računalo, ali nije previše pogodno za mobilne telefone. Vodoravni izbornik je preširok. Kontakti su daleko jedni od drugih. Upotreba informacija s bočne trake i pomicanje zaslona, ​​a to nije svi sviđaju.

Problem se može riješiti pomoću prilagodljivog i mobilnog dizajna s CSS3 medijskim upitima. Pomoću medijskih upita obnavljamo lokaciju sadržaja illip-Sada sve djeluje ovako:

• iznad - blok s vertikalnim navigacijskim izbornikom -
• ispod nje - blok s kontaktima, koji su sada također postavljeni vertikalno -
• Sadržaj bočne trake nije prikazan na strani sadržaja oznake
  , ali preko njega.

Ovo je jednostavan primjer onoga što se može učiniti s Responsive Web Design Media Queries. Zapravo, mogućnosti su puno veće.

Pa što je MediaQuestion?

Pod pojmom CSS Media Queries razumjeti modul CSS3, pomoću kojeg možete prilagoditi sadržaj stranice na određene uvjete. Na primjer, počinje reagirati na veličinu zaslona ili na orijentaciju uređaja (portret / krajolik).

Kako sustav razumije da morate promijeniti sadržaj? Za to se upotrebljavaju medijski upiti. Navode određene parametre. Ako je uređaj s kojeg je posjetitelj došao na web mjesto odgovara ovim parametrima, uključeni su i unaprijed registrirani stilovi. Može ih se napisati i u općoj tablici CSS-a iu zasebnoj datoteci.

Kompatibilnost s CSS medijskim upitima s preglednicima

Svi moderni preglednici podržavaju ovu tehniku, od safari do Chrome. Naravno, korisnici starijih verzija Internet Explorer bit će problema - ali priznajmo iskreno - one koji još uvijek koriste stare IE, doslovno sve može uzrokovati probleme.

Upiti za medije Sintaksa prilagodljivog izgleda

Možda ste već naišli na medijske upite kada ste spojili stilski obrazac HTML. Sjećaš li se ovog retka? Ponekad je na kraju dodan još jedan parametar, koji je izgledao ovako: mediji = rsquo-screenrsquo-.

Ovo je medijska potražnja! To znači da će datoteka navedena stila raditi na uređajima opremljenim zaslonom. Umjesto zaslon možete odrediti otisak - U tom se slučaju stilovi iz datoteke primjenjuju ako je stranica ispisana.

Možete koristiti sljedeće atribute:

• sve - univerzalna opcija, koristi ga tišina, koristi se u svim slučajevima -
• scrteen - zasloni (računala, prijenosna računala, tableti, pametni telefoni i sve što je opremljeno zaslonom)
• ispisati - printery-
• projekcija - projektori-
• govor - govorni preglednici-
• Brailleovo pismo - za uređaje za slabovidne osobe
• televizija - za TV ekrane.

Ovo nije sve. Postoji nekoliko dodatnih atributa CSS medijskih upita, ali se rijetko koriste. Osim toga, uopće ne možete odrediti parametar - po zadanom će se uključiti sve.

Struktura medijskog zahtjeva

Umjesto stvaranja stilske datoteke, možete upotrijebiti kôd css. Izgleda ovako:

@media zaslon i (maks. širina: 1024px) {(ovdje će biti stilova}

Nakon direktive @media, što jasno upućuje na to da će se koristiti upit za medije, postoji naznaka vrste uređaja (zaslon - zaslon) i dodatnih parametara. U ovom primjeru koristi se imovina CSS Media Queries Maks. Širina. To znači da će se stilovi navedeni u kovrčanim zagradama upotrijebiti ako veličina zaslona korisnika ne prelazi 1024px. zaslon i i nisu potrebni. Možete pisati ovako:

@media (maks. širina: 1024px) {}

U tom se slučaju svojstva upotrebljavaju na svim uređajima, a ne samo onima koji su opremljeni zaslonom.

Određivanje višestrukih parametara

Pretpostavimo da želite ograničiti raspon uređaja na kojima će se odabrani stilovi primjenjivati. Na primjer, želite prikazati svojstva samo onima koji posjete vašu web-lokaciju s pametnog telefona s veličinom zaslona od najmanje 320px, ali ne više od 500px. U ovom slučaju, upit ima sljedeći obrazac:

@media (min-width: 320px) i (max-width: 500px) {}

Ako ste upoznati s programiranjem, znate za što se koristi operater i. Za one koji ne znaju: provjerava jesu li oba uvjeta istinita. To jest, da biste aktivirali svojstva u upitu, zaslon mora biti najmanje 320 i ne više od 500 piksela.

Broj operatera i ne ograničavajući se na jedan. Možete ih staviti onoliko koliko želite. Na primjer, pokušajte izraditi određene veličine za zaslone pametnih telefona i sasvim drugačije za televizore.

Važna je točka orijentacije korisničkog uređaja. Netko pretražuje web stranice s pametnog telefona s portretnom orijentacijom, netko - s krajolikom. Za prvi, potreban nam je dodatni uvjet orijentacija: portret, za drugu, orijentacija: krajolik. Ove linije su također naznačene u zagradama nakon naredbe @media. Možete ih razdvojiti i.

Još jedna zanimljiva nijansa. Umjesto i možete koristiti operatera ili. On želi da jedan uvjet u zahtjevu bude istinit! Na primjer:

@media (maks. širina: 500px) ili (orijentacija: portret) {}

Ako je zaslon manji od 500px OR koristi se portretna orijentacija, početi raditi stilovi u kovrčanim zagradama.

Ključna riječ nije za preciznije podešavanje

U medijski upit možete umetnuti riječ nije. To je učinjeno ovako:

@media (ne max-width: 700px) {}

Svojstva se aktiviraju ako maksimalna širina nije 700 piksela.

Medijske funkcije

U uputama može se koristiti nekoliko unaprijed definiranih funkcija. Sve ih možete vidjeti na web mjestu W3C. Dovoljno je za većinu tipletera da svladaju tri glavna:

• orijentacija (o čemu smo već govorili) -
• širina (širina, također je spomenuta) -
• visina (Visina).

Visina se rijetko koristi, ali postoji nekoliko slučajeva u kojima ova postavka može biti praktična.

Kako i gdje postavljati zahtjeve?

Mnogi su izgledovi iz nekog razloga stavili na sam kraj stila. Na primjer, prvo se navode glavni stilovi, a zatim na dnu dokumenta postoje upiti.

Ovo nije baš dobro. Zanimljivo je staviti svojstva na različite uređaje odmah nakon glavnih stilova. Na primjer, imate div koji ima crvenu boju fonta:

div {

boja: crveno-

}

Odmah nakon navođenja upita:

@media (min-width: 320px) {}

Propisati svojstva.

Ovaj pristup će biti težak ako koristite "čisti" css. Preprocesori dolaze do spašavanja. Imaju mnogo zanimljivih mogućnosti za točniju primjenu zahtjeva.

Druga mogućnost je postavljanje svojstava za različite uređaje u različitim stilskim datotekama. To je osobito korisno ako koristite direktivu o uvozu za predprocesore. Rezultat je čist i čist kod.

Koju opciju upotrebljavate? Sve ovisi o osobnim sklonostima i osobitostima rada tima. Možda će se, umjesto vašeg posla, usvojiti određeni način postavljanja medijskih upita.

Također ne zaboravite da svoj život možete pojednostaviti uz pomoć najnovijeg softvera. Ne radi se samo o predprocesorima. Uz pomoć grupe Gulp Group CSS Media Queries možete učiniti postupak mnogo prikladnijim. Preporučujemo da ovladate alatom ili nekim od njegovih analoga.