CSS Media Queries: opis po korakih, funkcije in pregledi

Nekoč so tisti, ki so obiskali spletna mesta iz pametnih telefonov in podobnih mobilnih naprav, povzročili samo smeh. Mnogi preprosto niso mogli razumeti, zakaj je to potrebno, ker so taki priročni stacionarni računalniki! Ali v najslabšem primeru prenosni računalniki. Poleg tega je bil mobilni internet potem drag.

Čas je minil. Internet je bil poceni. Na trgu je prišel več telefonov in tabličnih računalnikov. Nekaj ​​časa kasneje so lastniki priljubljenih lokacij zmedli glavo. Po statističnih podatkih se je izkazalo, da se njihovi viri pogosteje obračajo s pametnih telefonov, ne pa s stacionarnimi osebnimi računalniki!

V tistih dneh spletna mesta niso bila optimizirana za ogled z mobilnih naprav. Če želite od starega vira iz telefona, bi morali biti zadovoljni z majhnimi črkami, majhnimi predmeti menija in neudobnimi gumbi.

Videz CSS Media Queries

Potrebovali so sredstva, tako da so izgledali dobro, če jih gledate s katerega koli zaslona. Prvič, se je razširila praksa oblikovanja ločenih lokacij za vsako velikost. Na primer, obiskovalec, ki je uporabil mobilni telefon, je dobil na enem viru in tistemu, ki je »sedel« iz računalnika - na drugi strani. Ampak to je bilo dolgo, drago in neprijetno.

Nato so prišli do CSS3 Media Queries. Z njihovo pomočjo, preprosta priložnost za izvedbo dinamičnega oblikovanja.

Kaj je dinamična oblika?

Ta izraz se uporablja, če se pojavnost vira spremeni glede na velikost zaslona, ​​na kateri je prikazana. Kako razumeti to? Preprosto je.

Predstavljajte si, da imate spletno stran. Na vrhu je navigacijski meni. Vodoravno. Raztegne celotno širino strani. Pod njim je blok s kontaktnimi informacijami. Telefon in naslov sta tudi razporejena po dveh blokih in sta razporejena vodoravno, ena poleg druge. Pod tem blokom je glavna vsebina, stranska vrstica pa se nahaja levo ali desno. Spodaj, kot ponavadi, noga.

To je "klasična" postavitev komponent. To je super za osebni računalnik, vendar ne preveč priročen za mobilne telefone. Horizontalni meni je preširok. Stiki so daleč drug od drugega. Če želite uporabiti informacije iz stranske vrstice in se morati pomikati po zaslonu, to ni všeč vsem.

Problem je mogoče rešiti s prilagodljivim in mobilnim dizajnom s CSS3 Media Queries. S pomočjo medijskih poizvedb obnovljamo lokacijo vsebine sloga-Zdaj vse deluje takole:

• zgoraj - blok z navpičnim navigacijskim menijem -
• pod njim - blok s kontakti, ki so sedaj postavljeni tudi navpično -
• Vsebina stranske vrstice ni prikazana na strani vsebine oznake
  , ampak nad njim.

To je preprost primer, kaj je mogoče storiti z zahtevami odzivnega spletnega oblikovanja. Dejstvo je, da so možnosti veliko večje.

Torej, kaj je MediaQuestion?

Pod izrazom CSS Media Queries razumeti modul CSS3, s katerim lahko vsebino strani prilagodite določenim pogojem. Na primer se začne odzvati na velikost zaslona ali na usmerjenost naprave (pokončno / pokrajinsko).

Kako sistem razume, da morate spremeniti vsebino? Za to se uporabljajo medijske poizvedbe. Določajo določene parametre. Če naprava, iz katere obiskovalec pride na spletno mesto, ustreza tem parametrom, so vnaprej registrirani slogi vključeni. Lahko jih napišete tako v splošni tabeli CSS kot v ločeni datoteki.

CSS Media Queries združljivost z brskalniki

Vsi sodobni brskalniki podpirajo to tehniko, od Safari do Chrome. Seveda uporabniki starejših različic Internet Explorer bo prišlo do problemov - a recimo priznava - tiste, ki še vedno uporabljajo stare IE, dobesedno lahko kaj povzroča težave.

Media Queries Sintaksa za prilagodljivo postavitev

Morda ste že naleteli na medijske poizvedbe, ko ste povezali slogovno html. Zapomni si to vrstico? Včasih je bil na koncu dodan še en parameter, ki je bil takšen: media = rsquo-screenrsquo-.

To je povpraševanje po medijih! To pomeni, da bo podana datoteka s slogi delovala na zaslonu. Namesto zaslon lahko določite natisnite - V tem primeru se uporabijo slogi iz datoteke, če je stran natisnjena.

Uporabite lahko naslednje atribute:

• vse - univerzalna opcija, jo uporablja tišina, se uporablja v vseh primerih -
• skrčen - zasloni (računalniki, prenosni računalniki, tablični računalniki, pametni telefoni in vse, kar je opremljeno z zaslonom) -
• tisk - tiskalniki-
• projekcija - projektorji -
• govor - govorni brskalniki -
• Braillovo pisavo - za naprave za slabovidne osebe -
• tv - za TV-zaslone.

To ni vse. Obstaja več dodatnih atributov CSS Media Queries, vendar se jih redko uporablja. Poleg tega parametra sploh ni mogoče določiti - privzeto se bo vklopil vse.

Struktura medijske zahteve

Namesto da ustvarite slogovno datoteko, lahko uporabite kodo css. Izgleda takole:

@media zaslon in (max-širina: 1024px) {(tu bodo slogi}

Po direktivi @media, ki pojasnjuje, da bo medijska poizvedba uporabljena, se prikaže vrsta naprave (zaslon - zaslon) in dodatne parametre. V tem primeru se uporablja lastnost CSS Media Queries Največja širina. To pomeni, da bodo slogi, navedeni v zavihkih, uporabljeni, če velikost zaslona uporabnika ne presega 1024px. Zaslon in in niso potrebni. Pišete lahko tako:

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

V tem primeru se bodo lastnosti uporabljale na vseh napravah, ne samo tistih, ki so opremljene z zaslonom.

Določanje večih parametrov

Recimo, da želite omejiti obseg naprav, na katerih bodo uporabljeni izbrani slogi. Na primer, želite prikazati lastnosti samo tistim, ki obiščejo vaše spletno mesto s pametnega telefona z velikostjo zaslona najmanj 320px, vendar ne več kot 500px. V tem primeru je poizvedba naslednja:

@media (min-širina: 320px) in (max-width: 500px) {}

Če ste seznanjeni s programiranjem, vedite, za kaj se uporablja operater in. Za tiste, ki ne vedo: preveri, ali sta oba pogoja resnična. To pomeni, da mora biti zaslon aktiviran v poizvedbi, ki mora biti vsaj 320 in ne več kot 500 slikovnih pik.

Število operaterjev in ni omejeno na eno. Lahko jih postavite natanko toliko, kot želite. Na primer, poskusite ustvariti določene velikosti za zaslone pametnih telefonov in popolnoma drugačne za televizorje.

Pomembna točka je orientacija uporabniške naprave. Nekdo brska spletne strani iz pametnega telefona s pokončno usmerjenostjo, nekoga - s pokrajino. Za prvo, potrebujemo dodaten pogoj orientacija: portret, za drugo, orientacija: krajina. Te vrstice so tudi označene v oklepajih po ukazu @media. Lahko jih ločite z uporabo in.

Še en zanimiv odtenek. Namesto in lahko uporabite operaterja ali. Hoče, da je eden od pogojev v zahtevi resničen! Na primer:

@media (max-width: 500px) ali (orientacija: portret) {}

Če je zaslon manjši od 500px ALI portretna orientacija se uporablja, začnejo delovati slogi v zavihkih.

Ključna beseda ni za bolj natančno prilagajanje

V medijsko poizvedbo lahko vstavite besedo ne. To je storjeno tako:

@media (ne največ-širina: 700px) {}

Lastnosti so aktivirane, če največja širina ni 700 slikovnih pik.

Medijske funkcije

V poizvedbah lahko uporabite več vnaprej določenih funkcij. Vse jih lahko vidite na spletnem mestu W3C. Dovolj je, da večina tipkalcev obvlada tri glavne:

• usmeritev (o tem smo že govorili) -
• širina (širina, tudi omenjeno) -
• višina (višina).

Višina je redko uporabljena, vendar je v nekaterih primerih lahko ta nastavitev v pomoč.

Kako in kje postaviti zahteve?

Mnoge postavitve jih zaradi nekega razloga postavijo na samem koncu slogovne tabele. Na primer, najprej so navedeni glavni slogi, nato pa na dnu dokumenta obstajajo poizvedbe.

To ni zelo dobro. To je veliko bolj priročno, da postavite lastnosti za različne naprave takoj po glavnih slogih. Na primer, imate div, ki ima rdečo barvo pisave:

div {

barva: rdeča-

}

Takoj po določitvi poizvedbe:

@media (min-širina: 320px) {}

Napišite lastnosti.

Ta pristop bo okoren, če uporabljate "čisto" css. Preprocessorji pridejo na reševanje. Imajo veliko zanimivih priložnosti za natančnejšo uporabo zahtev.

Druga možnost je, da v različne slogovne datoteke postavite lastnosti za različne naprave. To je še posebej uporabno, če za predprocesor uporabljate uvozno direktivo. Rezultat je čista, čista koda.

Katero možnost uporabiti? Vse je odvisno od osebnih želja in posebnosti dela ekipe. Morda boste na mestu vašega dela sprejeli določen način postavljanja medijskih poizvedb.

Prav tako ne pozabite, da lahko poenostavite svoje življenje s pomočjo najnovejše programske opreme. Ne gre le za predprocesorje. S pomočjo Gulp Group CSS Media Queries lahko proces naredite veliko bolj priročen. Priporočamo, da obvladate to orodje ali nekatere od njegovih analogov.