Ponekad su oni koji su posjetili web-mjesta s pametnih telefona i sličnih mobilnih uređaja izazvali samo smijeh među ostalima. Mnogi jednostavno nisu mogli razumjeti zašto je to potrebno, jer postoje takva praktična 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 jeftiniji. Prodavalo se sve više telefona i tableta. Nakon nekog vremena vlasnici popularnih web stranica bili su zbunjeni grebanjem po glavama. Prema statistikama pokazalo se da su njihovi resursi češće posjećivani iz pametnih telefona nego od stacionarnih računala!

Tada stranice nisu bile optimizirane za mobilno pregledavanje. Došavši do starog resursa s telefona, morao bi biti zadovoljan malim slovima, malim stavkama izbornika i nezgodnim gumbima.

Pojava CSS Media upita

Postojala je potreba za inženjerstvom resursa tako da izgledaju dobro kad se gledaju s bilo kojeg zaslona. Izvorno se proširila praksa stvaranja zasebnih stranica za svaku veličinu. Na primjer, posjetitelj koji je koristio mobilni telefon pao je u jedan resurs, a drugi koji je "sjedio" s jednog računala na drugo. Ali bila je to duga, skupa i nezgodna. Zatim se pojavio CSS3 Media Queries. Uz njihovu pomoć, jednostavna prilika za implementaciju dinamičnog dizajna.

Što je dinamički dizajn?

Ovaj se izraz koristi ako izgled izvora varira ovisno o veličini zaslona na kojem se prikazuje. Takorazumjeti? Sve je jednostavno. Zamislite da imate web-lokaciju. Izbornik za navigaciju nalazi se na vrhu. Horizontalna. Proteže se do pune širine stranice. Ispod je blok s kontaktnim podacima. Telefon i adresa su također odvojeni s dva bloka i smješteni su horizontalno, blizu jedan drugome. U okviru ovog bloka nalazi se glavni sadržaj, a bočna traka nalazi se lijevo ili desno. Ispod, kao i obično, obuća.


Ovo je "klasični" raspored komponenata. To je super za osobno računalo, ali ne i vrlo zgodno za mobilne telefone. Horizontalni izbornik je preširok. Kontakti su međusobno udaljeni. Da biste koristili informacije s bočne trake i uopće imate zaslon za pomicanje, svima se to ne sviđa. Problem se može riješiti pomoću adaptivnog i mobilnog dizajna s CSS3 Media upitima. Pomoću medijskih redova rekonstruiramo lokaciju sadržaja, a sada sve radi ovako:

na vrhu - blok s vertikalnim navigacijskim izbornikom;

pod njom - blok s kontaktima, koji su sada također postavljeni okomito;

sadržaj bočne trake nije prikazan sa strane sadržaja oznake i NAD-a.

Ovo je najlakši primjer onoga što možete učiniti s Responsive Web Design Media Queries. Zapravo, mogućnosti su mnogo više.

Dakle, što su medijski upiti?

Pod pojmom CSS Media Queries, CSS3 modul se koristi kako bi se sadržaj stranice prilagodio određenim uvjetima. Na primjer, počinje odgovarati na veličinu zaslona ili orijentaciju uređaja(knjiga /krajolik). Kako sustav razumije što je potrebno za promjenu sadržaja? Da biste to učinili, upotrijebite upite medija. Oni određuju određene parametre. Ako uređaj s kojeg je posjetitelj ušao na web-lokaciju zadovoljava te parametre, uključuje unaprijed napisane stilove. Mogu se upisati i u CSS opću tablicu iu zasebnu datoteku.

Kompatibilnost s CSS medijskim upitima s preglednicima

Svi moderni preglednici podržavaju ovu tehniku, od Safarija do Chromea. Naravno, korisnici starijih verzija Internet Explorera će imati problema, ali budimo iskreni - za one koji još uvijek koriste stari IE, doslovno sve može uzrokovati probleme.

Sintaksa adaptivnog rasporeda za upite medija

Možda ste već naišli na medijske upite kada priključujete stilsku tablicu u html. Zapamtite ovu liniju? Ponekad je na kraj dodana još jedna opcija, koja je izgledala ovako: media = 'screen'. Ovo je medijski poziv! To znači da će specificirana lista stilova raditi na uređajima opremljenim zaslonima. Umjesto zaslona, ​​možete odrediti ispis - u tom slučaju se primjenjuju stilovi datoteka ako se stranica ispisuje. Možete koristiti sljedeće atribute:

sve - zadana opcija koja se koristi u svim slučajevima;

scrteen - zasloni (računala, prijenosna računala, tableta, pametni telefoni i sve što je opremljeno zaslonom);

tiskarski pisači;

projekcijski projektori;

preglednici govora i jezika;

Brailleovo pismo - za uređajeza slabovidne osobe;

tv - za TV ekrane.

To nije sve. Postoji nekoliko dodatnih atributa CSS Media Queries, ali oni se rijetko koriste. Osim toga, ne možete odrediti zadanu opciju za uključivanje svih.

Struktura zahtjeva medija

Umjesto kreiranja stilizirane datoteke, možete koristiti css kod. Izgleda ovako: @media ekran i (max-width: 1024px) {(postojat će stilovi) Slijedeći @media direktivu, koja jasno pokazuje da će se koristiti medijski upit, postoji naznaka vrste uređaja (zaslona) i dodatnih parametara. Za ovaj primjer koristi se svojstvo Max Width za CSS medijske upite, što znači da će zagrade navedene u stilu biti korištene ako korisnikove veličine zaslona ne prelaze 1024 px.Zaslon i neobavezno. max-width: 1024px) {} U tom će se slučaju koristiti svojstva

Odredite više parametara

Pretpostavimo da želite donekle ograničiti raspon uređaja koji će se koristiti u stilu. Recimo da želite prikazati svojstva samo onima koji su koji posjeti vašu web-lokaciju s pametnog telefona čija veličina zaslona nije manja od 320 piksela, ali ne više od 500 px. U ovom slučaju upit ima sljedeći oblik: @media (min-width: 320px) i (max-width: 500px) {} Ako ste upoznati s programiranjem, nj znaju za što se koristi i za što se koristi. Za one koji ne znaju: provjerava jesu li ta dva uvjeta istinita. To znači aktivirati svojstvazaslon zahtjeva mora biti najmanje 320 i ne veći od 500 piksela. Broj operatora i nije ograničen na jedan. Možete ih staviti točno onoliko koliko želite. Na primjer, pokušajte stvoriti određene veličine za zaslone pametnih telefona i potpuno različite - za televizore. Važna točka je orijentacija korisničkog uređaja. Netko pregledava web-lokacije putem pametnog telefona s portretnom orijentacijom, netko s krajolikom. Za prvi ćete trebati dodatni uvjet orijentacije: portret, za druge, odnosno, orijentacija: krajolik. Ovi redovi su također označeni u zagradama nakon naredbe @media. Možete podijeliti pomoću i. Još jedna zanimljiva nijansa. Umjesto toga, možete koristiti operatera ili. Potrebno mu je da je barem jedan uvjet u zahtjevu istinit! Na primjer: @media (max-width: 500px) ili (orijentacija: portret) {} Ako je zaslon manji od 500 px ILI koristite okomitu orijentaciju, stilovi u uvijenim zagradama će početi raditi.

ključna riječ nije za suptilniju postavku

U upitu medija možete umetnuti riječ ne. To se radi na sljedeći način: @media (ne max-width: 700px) {} Svojstva se aktiviraju ako maksimalna širina nije 700 piksela.

Funkcije medija

Nekoliko unaprijed definiranih funkcija može se koristiti u upitima. Provjerite sve vas na W3C. Većina planera ima dovoljno da posjeduje tri glavna:

orijentaciju (o tome smo već govorili);

širina (širina, također spomenuta);

visina (visina). Visina se rijetko koristi, ali postoji nekolikoslučajeva u kojima je ova postavka korisna.

Kako i gdje postaviti upite?

Mnogi pretraživači ih iz nekog razloga smještaju na sam kraj stila. Na primjer, glavni stilovi su navedeni prvi, a zatim, na dnu dokumenta, postoje upiti. Ovo nije baš dobro. Mnogo je prikladnije smjestiti svojstva za različite uređaje odmah nakon glavnih stilova. Na primjer, imate div, koji ima crvenu boju fonta: div {boja: crvena; } Odmah nakon što je naveden upit: @media (min-width: 320px) {} Zapisujemo svojstva. Takav bi pristup bio težak ako bi se koristio "čisti" css. Preprocesori dolaze u pomoć. Imaju mnogo zanimljivih mogućnosti za smislenije aplikacije. Druga mogućnost je postavljanje svojstava za različite uređaje u različitim stilskim datotekama. To je osobito korisno ako koristite uputu za uvoz preprocesora. Rezultat je pogodan za uređivanje, čišćenje koda. Koju opciju koristiti? Sve ovisi o osobnim sklonostima i osobinama tima. Možda će se, umjesto vašeg rada, prihvatiti određeni način postavljanja medijskih upita. Također, ne zaboravite da možete olakšati svoj život najnovijim softverom. Ne radi se samo o pretprocesorima. Uz Gulp Group CSS Media upite, možete učiniti proces mnogo praktičnijim. Preporučamo svladati ovaj alat ili bilo koji njegov analog.