Medijske zahteve CSS - opis, uporaba in priporočila

Medijske zahteve so funkcija CSS, ki omogoča, da se vsebina spletne strani prilagaja različnim velikostim in resolucijam zaslona. So sestavni del fleksibilnega spletnega oblikovanja in se uporabljajo za prilagoditev videza spletnih mest za več naprav z različnimi velikostmi zaslona. Torej, Media Queries je modul CSS3, ki vam omogoča, da pretvorite vsebino v takšne pogoje, kot je ločljivost zaslona pametnega telefona ali računalnika. Junij 2012 je postal priporočeni standard W3C in se danes aktivno uporablja v spletnem razvoju in grafičnem oblikovanju.

Zahteve za predstavnostne CSS so uporabne, če želite uporabiti sloge, odvisno od splošne vrste naprave (na primer iz tiskanja ali zaslona), posebnih značilnosti (na primer glede širine okna brskalnika) ali okolja (na primer pri pogojih zunanjega osvetlitve). Veliko število internetnih povezanih naprav, ki so danes na voljo, naredijo medijske zahteve pomembno orodje za ustvarjanje spletnih strani in aplikacij, ki so dovolj stabilne za delo na katerikoli opremi.

Zgodovina

Medijske zahteve so bile prvič opredeljene v prvotnem predlogu CSS Hocon Wium Lie leta 1994, vendar takrat niso postali del CSS1. Priporočilo HTML4 iz leta 1997 prikazuje primer, kako se lahko te komponente dodajo v prihodnosti.

Leta 2000 je W3C pričel z delom na Media Queries. Prvi javni delovni projekt za medijske poizvedbe je bil objavljen leta 2001. Specifikacija je postala priporočila W3C leta 2012, ko so brskalniki dodali podporo.

Kako so v CSS zapisane zahteve za medije?

Poizvedbe lahko vstavite v HTML-datoteko spletne strani ali vključite v ločeno datoteko .CSS, na katero se nanaša. Spodaj je opis in primer medijske poizvedbe v CSS:

@media zaslon in (max-širina: 768px)

{

glava {višina: 70px; }

članek {font-size: 14px; }

img {max-width: 480px; }

}

Zgornja večpredstavnostna zahteva je aktivirana, če je uporabnikovo okno brskalnika široko ali manj 768 slikovnih pik. To se lahko zgodi, če skrajšate okno na namiznem računalniku ali si ogledate spletno vsebino z mobilno napravo, kot je tablični računalnik.

Kako uporabljati medijske poizvedbe CSS3?

V odzivnem spletnem oblikovanju zahteve za medije delujejo kot filtri za različne velikosti zaslona. Kot vsi moduli v kaskadnem slogovnem listu, tisti, ki se pojavijo na seznamu, nadomeščajo tiste, ki so nad njimi. Zato so privzeti slogi običajno najprej definirani v dokumentu CSS, sledijo pa medijske poizvedbe za različne velikosti zaslona. Na primer, najprej lahko določite sloge namizja, nato pa večpredstavnostno poizvedbo s slogi za uporabnike tabličnih računalnikov, nato pa za uporabnike pametnih telefonov. Slogi lahko določite tudi v obratnem vrstnem redu.

Medtem ko je najmanjša širina najpogostejša funkcija, ki se uporablja v medijskih poizvedbah, je veliko drugih tudi na splošno na voljo. Dimenzije slik v medijskih zahtevah CSS vključujejo:

• najmanjša širina naprave;
• najmanjša višina naprave;
• razmerje;
• največji barvni indeks;
• največja ločljivost;
• usmeritev zaslona.

Na primer, vrednost ločljivosti lahko uporabite za odkrivanje prikazov HiDPI (kot so slike mrežnice) in za zamenjavo standardnih slik, ki se prenesejo z visoko ločljivostjo.

Uporaba in napake

Zakaj ne zahtevajo medijev za CSS? Ta komponenta je sestavljena iz vrste medija in enega ali več izrazov z uporabo medijskih funkcij, ki se vrnejo bodisi resnično bodisi false. Rezultat poizvedbe je resničen, če je vrsta medija, ki je v njem navedena, ustreza vrsti naprave, na kateri je dokument prikazan, in vsi izrazi v medijski poizvedbi so resnični. V primerih, ko zahteve CSS za medije ne delujejo, morate preveriti ustrezna pravila sloga in kaskadna pravila. Morda ti podatki vsebujejo napako.

Vrste medijev

Vrsta medija se lahko razglasi v glavi dokumenta HTML z uporabo atributa "media" znotraj elementa . Vrednost atributa "media" označuje, na kateri napravi bo prikazan povezan dokument. Vrste medijev je mogoče razglasiti tudi v navodilih za obdelavo XML, @import at-rule in @media at-rule. Večpredstavnostni pogled »vse« lahko uporabite tudi za označevanje, da se slogovni list uporablja za vse vrste medijev.

Kaj je CSS?

CSS (Cascading Style Sheet ali kaskadnih listov slogov) se uporablja za oblikovanje postavitve spletnih strani, oblikovanje slogov besedila, velikosti tabele in drugih vidikov spletne vsebine, ki so bile predhodno lahko opredeljene le v strukturi strani HTML.

CSS spletnim razvijalcem pomaga ustvariti enotno obliko za več strani spletnega mesta. Namesto da bi določili videz vsake tabele in vsakega bloka besedila v HTML, so slogi določeni samo enkrat v dokumentu CSS. Ko je oblika opredeljena v kaskadnem slognem listu, jo lahko uporablja katera koli stran, ki se sklicuje na datoteko CSS. Poleg tega CSS omogoča preprosto spreminjanje sloga na več straneh istočasno. Spletni razvijalec lahko na primer načrtuje povečanje privzete velikosti besedila z 10 na 12 pt na petdesetih straneh spletnega mesta. Če se vse strani nanašajo na isti slogovni list, se velikost besedila spremeni le v tabeli in na vseh straneh bo pravilna velikost.

Čeprav je CSS odličen za ustvarjanje slogov besedila, je uporaben tudi za oblikovanje drugih vidikov postavitve spletne strani. Na primer, lahko CSS uporabite za določitev polnjenja celic v tabeli, slogu, debelini in barvi meje ali za zapolnitev slikovnih elementov ali drugih predmetov. CSS v primerjavi z HTML-jem omogoča spletnim razvijalcem natančnejši nadzor nad tem, kako bodo izgledale spletne strani.

Vrste multimedijskih poizvedb

Vrste medijev opisujejo splošno kategorijo naprave. Spletne strani so običajno zasnovane z zasloni v mislih, lahko programer ustvari sloge, oblikovane za posebne naprave, kot so tiskalniki ali avdio uredniki. Ta koda CSS je na primer za tiskalnike: @media print {...}.

Ciljate lahko tudi na več naprav. To pravilo @media na primer uporablja dve zahtevi za medije za usmerjanje zaslonskih in tiskalnih naprav: @media zaslon, natisnite {...}.

CSS medijske funkcije

Multimedijske funkcije opisujejo posebne značilnosti uporabniškega posrednika, izhodne naprave ali okolja. Na primer, nekatere sloge lahko uporabite za širokozaslonske monitorje, računalnike ali naprave, ki se uporabljajo pri slabi svetlobi. V tem primeru se slogi uporabljajo, ko lahko glavni element za vnašanje uporabnikov (na primer miška) visi nad elementi: @media (lebdenje: lebdenje) {...}.

Mnoge multimedijske funkcije so funkcije območja, kar pomeni, da imajo lahko "min;" ali "max;" predpono za izražanje najmanjših ali največjih omejitev pogoj. Na primer, ta ukaz uporablja sloge samo, če je širina pogleda v brskalniku enaka ali manjša od 12.450 slikovnih pik: @media (max-širina: 12450px) {...}.

Če ustvarite poizvedbo o multimedijski funkciji, ne da bi določili vrednost, se bodo ugnezdeni slogi uporabili, dokler vrednost funkcije ne bo nič. Ta CSS se na primer uporablja za katero koli napravo z barvnim zaslonom: @media (barva) {...}.

Če funkcija ne velja za napravo, na kateri se izvaja brskalnik, so izrazi, ki vsebujejo to večpredstavnostno funkcijo, vedno napačni. Na primer, slogi, ki so vgrajeni v naslednjo poizvedbo, nikoli ne bodo uporabljeni, ker nobena govorna naprava nima oblike zaslona: @media govor in (razmerje: 11/5) {...}.

Tehnične specifikacije

Medijske poizvedbe so ključni element prilagodljivega oblikovanja, ki vam omogoča prilagajanje CSS glede na različne parametre ali značilnosti naprave. Na primer, večpredstavnostna poizvedba lahko uporablja različne sloge, če je zaslon manjši od določene velikosti ali glede na to, ali uporabnik ohranja napravo v pokončnem ali pokončnem načinu.

Sintaksa zahtevkov za večpredstavnost se uporablja tudi v drugih kontekstih, na primer v atributu medija elementa , ki se lahko prilagodi v niz multimedijskih poizvedb, da bi ugotovili, ali naj se ta vir uporabi pri izbiri določene slike za uporabo v elementu .

Metoda Window.matchMedia () se lahko uporablja za preverjanje okna na zahtevo v mediju. Funkcijo lahko uporabite tudi MediaQueryList.addListener () obvestiti, kdaj se stanje zahtev spremeni. S to funkcijo se lahko vaše spletno mesto ali aplikacija odzove na konfiguracijo, usmerjenost ali spremembe statusa naprave.

Večpredstavnostne poizvedbe za sloge klicev

Prilagodljiv spletni model je naletel na počasno nalaganje vsebine. Zdaj je postopek za odpravo te pomanjkljivosti dobro dokumentiran. Obstaja več načinov, ki jih razvijalci uporabljajo za boljšo nalaganje vsebine in slik na različnih napravah.

Ena izmed njih je uporaba medijskih poizvedb, ki delujejo tako, da se na podlagi svoje velikosti sklicujejo na sloge uporabniške naprave. V preteklosti so programerji trdili, ali so medijske zahteve najboljša rešitev za mobilne naprave in ta razprava se nadaljuje. Zdaj je uradno priznano, da so medijske poizvedbe CSS preprost in učinkovit način za prikazovanje različnih vsebin za več naprav, najpogosteje pa se uporabljajo poizvedbe, ki se nanašajo na višino in širino pogleda.

Klicanje z zunanjim slogovnim listom

Slogi CSS za medijske poizvedbe najprej preverite vrsto medija v nizu uporabniškega posrednika, preden nadaljujete s preverjanjem fizičnih atributov pogleda. So deklaracija CSS, ki jo je mogoče pozvati z zunanjim slogovnim listom. Zunanji klic bo videti takole: <link rel = "stylesheet" media = "in (min-width: 320px) in (max-width: 480px)" href = "css / yourstylesheet.css" />.

Neposredni klic CSS bo videti takole:

@media zaslon in (min-širina: 320 slikovnih pik)

in (max-širina: 480px) {

/ * Vnesite svoje sloge tukaj

}.

Medijske poizvedbe CSS niso modularni, kar pomeni, da lahko njihovo delo otežijo. Zahtevek za element je podoben medijski poizvedbi, ker uporablja določene CSS, če so izpolnjeni določeni pogoji. Vendar te vrste podatkov temeljijo na elementih, ne v brskalniku, ki trenutno niso podprti v CSS3. Elementarni poizvedbe dobivajo zagon, še posebej, ker dopolnjujejo zahteve za medije CSS. To pomeni, da lahko oba skupaj sčasoma sodelujeta pri ustvarjanju bolj modularnih in prilagodljivih modelov.

Delo s slikami

Skaliranje slik za prilagodljivo zasnovo je precej preprost postopek. Kljub temu obstaja več težav, ki jih je treba obravnavati. Gre za izgubljevanje delov in slik pri stiskanju vsebine na strani na manjših napravah. Če želite ustvariti prilagodljive slike, preprosto dodajte naslednjo kodo na slogovno oznako:

img {

maksimalna širina: 100% -

}

S tem se slika zmanjša tako, da se bo ujemala z velikostjo vsebnika, ki je manjša od širine slike. Nastavitev največje širine na 100% pomeni, da se slika ne bo povečala več kot njegova dejanska velikost.

Vendar pa je to lahko problem pri uspešnosti spletnega mesta, ker v bistvu priskrbite popolno sliko vsaki napravi. Za to ni preproste rešitve, še posebej, če delate na mestu z zastarelimi slikami. Vendar pa so Adaptive Images plug-in, ki lahko optimira vaše slike na podlagi velikosti zaslona. Prilagodljivo oblikovanje, ki temelji na Media Foundation Framework, omogoča tudi skupno rabo slik na podlagi velikosti zaslona.

Pri delu s slikami morate uporabiti SVG, spletne pisave, spletno vrsto in CSS.