Včasih so tisti, ki so obiskali spletne strani s pametnih telefonov in podobnih mobilnih naprav, med drugim povzročili le smeh. Mnogi preprosto niso mogli razumeti, zakaj je to potrebno, ker obstajajo tako priročni stacionarni računalniki! Ali, v najslabšem primeru, prenosniki. Poleg tega je bil mobilni internet nato drag. Čas je minil. Internet je cenejši. Prodajalo je vedno več telefonov in tablet. Po nekaj časa so bili lastniki priljubljenih spletnih mest zmedeni, ko so praskali po glavah. Po statističnih podatkih se je izkazalo, da so njihovi viri pogosteje obiskani s pametnih telefonov kot s stacionarnimi računalniki!

Takrat mesta niso bila optimizirana za brskanje po mobilnih napravah. Ko ste prišli na stari vir iz telefona, bi morali biti zadovoljni z majhnimi črkami, majhnimi elementi menija in nerodnimi gumbi.

Pojav CSS Media Queries

Obstajati je bilo treba inženirstvo virov, tako da so videti dobro, če gledamo iz katerega koli zaslona. Prvotno širjenje prakse ustvarjanja ločenih mest za vsako velikost. Na primer, obiskovalec, ki je uporabljal mobilni telefon, je padel v en vir in eden, ki je "sedel" iz enega računalnika v drugega. Ampak to je bilo dolgo, drago in neprijetno. Nato so se pojavile CSS3 Media Queries. Z njihovo pomočjo lahko preprosto izvedete dinamično zasnovo.

Kaj je dinamično oblikovanje?

Ta izraz se uporablja, če se videz vira razlikuje glede na velikost zaslona, ​​na katerem je prikazan. Tako jerazumeti Vse je preprosto. Predstavljajte si, da imate spletno mesto. Navigacijski meni je na vrhu. Vodoravno. Raztegne se do celotne širine strani. Spodaj je blok s kontaktnimi podatki. Telefon in naslov sta ločena z dvema blokoma in sta vodoravno, blizu drug drugega. V tem bloku je glavna vsebina, stranska vrstica pa levo ali desno. Spodaj, kot ponavadi, obutev.


To je "klasična" razporeditev komponent. To je super za osebni računalnik, vendar ni zelo priročen za mobilne telefone. Horizontalni meni je preširok. Stiki so daleč drug od drugega. Če želite uporabiti informacije iz stranske vrstice in sploh imeti zaslon za pomikanje, mu vsi ne marajo. Problem je mogoče rešiti z uporabo prilagodljive in mobilne zasnove s poizvedbami CSS3 Media Queries. S pomočjo vrstic medijev rekonstruiramo lokacijo vsebine, zdaj pa vse deluje tako:

na vrhu - blok z navpičnim navigacijskim menijem;

pod njo - blok s stiki, ki so sedaj postavljeni tudi navpično;

vsebina stranske vrstice ni prikazana s strani vsebine oznake in NAD-a.

To je najlažji primer, kaj lahko storite z odzivnimi poizvedbami za Web Design Media. Dejansko so priložnosti veliko več.

Kaj so torej medijske poizvedbe?

Pod izrazom CSS Media Queries se uporablja modul CSS3, ki pripomore k temu, da se vsebina strani prilagodi določenim pogojem. Na primer, začne se odzivati ​​na velikost zaslona ali usmerjenost naprave(knjiga /krajina). Kako sistem razume, kaj je potrebno za spremembo vsebine? Za to uporabite poizvedbe medijev. Določajo določene parametre. Če naprava, iz katere je obiskovalec vstopil na spletno mesto, izpolnjuje te parametre, vključuje vnaprej napisane sloge. Lahko jih zapišemo v splošno tabelo CSS in v ločeno datoteko.

Združljivost s poizvedbami CSS medijev z brskalniki

Vsi moderni brskalniki podpirajo to tehniko, od Safarija do Chroma. Uporabniki starejših različic Internet Explorerja bodo seveda imeli težave, vendar bodimo iskreni - za tiste, ki še vedno uporabljajo staro IE, lahko dobesedno pride do težav.

Sintaksa prilagodljive postavitve za poizvedbe v medijih

Morda ste že naleteli na poizvedbe medijev, ko priklapljate slogovne datoteke v html. Se spomniš te vrstice? Včasih je bila na koncu dodana še ena možnost, ki je izgledala takole: media = 'screen'. To je medijski klic! To pomeni, da bo podana slogovna vrstica delovala na napravah, ki so opremljene z zaslonom. Namesto zaslona lahko določite tiskanje - v tem primeru se slogovne datoteke uporabljajo, če se stran natisne. Uporabite lahko naslednje atribute:

all - privzeta možnost, ki se uporablja v vseh primerih;

štirinajst zaslonov (računalniki, prenosni računalniki, tablični računalniki, pametni telefoni in vse, kar je opremljeno z zaslonom);

tiskalniki;

projekcijski projektorji;

brskalniki govora - jezika;

Braillova pisava - za napraveza slabovidne;

tv - za televizijske zaslone.

To ni vse. Obstaja več dodatnih atributov poizvedb za CSS, vendar se le redko uporabljajo. Poleg tega ne morete določiti privzete možnosti za vklop vseh.

Struktura zahteve za medije

Namesto ustvarjanja datoteke s slogom lahko uporabite kodo css. Izgleda takole: @media zaslon in (max-width: 1024px) {(bo stilov) Po direktivi @media, ki pojasnjuje, da bo uporabljena medijska poizvedba, je prikazana vrsta naprave (zaslon) in dodatni parametri. Lastnost CSS Media Queries Max Width je uporabljena za ta primer, kar pomeni, da bodo oklepaji, podani v slogu, uporabljeni, če uporabnikova velikost zaslona ne presega 1024 px. Screen in in so neobvezna. max-width: 1024px) {} V tem primeru bodo uporabljene lastnosti

Določite več parametrov

Recimo, da želite nekoliko omejiti obseg naprav, ki bodo uporabljene v slogu. Recimo, da želite prikazati lastnosti samo tistim, ki so ki obišče vašo spletno stran s pametnim telefonom, katerega velikost zaslona ni manjša od 320 px, vendar ne več kot 500 px. V tem primeru ima poizvedba naslednjo obliko: @media (min-width: 320px) in (max-width: 500px) {} Če ste seznanjeni s programiranjem, ga vedo, za kaj se uporablja. Za tiste, ki ne vedo: preverja, ali sta pogoja resnična. To pomeni, da aktivirate lastnostiokno z zahtevki mora biti vsaj 320 in največ 500 slikovnih pik. Število izvajalcev in ni omejeno na eno. Lahko jih postavite točno toliko, kot želite. Na primer, poskusite ustvariti določene velikosti za pametne telefone in popolnoma drugačne - za televizorje. Pomembna točka je usmerjenost uporabniške naprave. Nekdo si ogleduje spletna mesta s pametnim telefonom s pokončno usmeritvijo, nekdo s pokrajino. Za prvo boste potrebovali dodaten pogoj orientacije: portret, za druge pa orientacijo: pokrajino. Te vrstice so po ukazu @media označene tudi v oklepajih. Lahko razdelite z uporabo in. Še en zanimiv odtenek. Namesto tega lahko uporabite operaterja ali. Potrebuje, da je vsaj en pogoj v zahtevi resničen! Na primer: @media (max-width: 500px) ali (orientacija: portret) {} Če je zaslon manjši od 500 px ALI uporabite pokončno usmerjenost, se bodo začeli uporabljati slogi v zavitih oklepajih.

ključna beseda ni za bolj subtilno nastavitev

V poizvedbi medijev lahko besedo ne vstavite. To storite tako: @media (ne max-width: 700px) {} Lastnosti se aktivirajo, če največja širina ni 700 slikovnih pik.

Medijske funkcije

V poizvedbah se lahko uporablja več vnaprej določenih funkcij. Oglejte si vse na W3C. Večina načrtovalcev ima dovolj, da ima tri glavne:

orientacijo (o tem smo že govorili);

omenjena tudi širina (širina);

višina (višina).

Višina se redko uporablja, vendar jih je večprimerih, ko je ta nastavitev lahko koristna.

Kako in kje postaviti poizvedbe?

Številni pajki jih iz neznanega razloga postavijo na sam konec slogovne tabele. Najprej so navedeni glavni slogi, nato pa so na dnu dokumenta poizvedbe. To ni zelo dobro. To je veliko bolj priročno, da se lastnosti za različne naprave takoj po glavnih stilov. Na primer, imate div, ki ima rdečo barvo pisave: div {barva: rdeča; } Takoj po določitvi poizvedbe: @media (min-width: 320px) {} Lastnosti zapišemo. Tak pristop bi bil zapleten, če bi uporabljali "čisto" css. Preprocesorji pridejo na pomoč. Imajo veliko zanimivih funkcij za bolj smiselne aplikacije. Druga možnost je postavitev lastnosti za različne naprave v različnih slogih. To je še posebej uporabno, če uporabljate direktivo o uvozu preprocesorja. Rezultat je priročno urejanje, čista koda. Katero možnost uporabite? Vse je odvisno od osebnih preferenc in značilnosti ekipe. Morda bo na mestu vašega dela sprejet določen način postavljanja medijskih poizvedb. Prav tako ne pozabite, da lahko z najnovejšo programsko opremo olajšate svoje življenje. Ne gre samo za predprocesorje. Z Gulp Group CSS Media Queries lahko naredite postopek veliko bolj priročen. Priporočamo, da obvladate to orodje ali katerega od njegovih analogov.