Poizvedbe medijev so funkcija CSS, ki omogoča prilagajanje vsebine spletne strani različnim velikostim zaslona in dovoljenj. So sestavni del prilagodljivega spletnega oblikovanja in se uporabljajo za prilagajanje videza spletnih strani za več naprav z različnimi velikostmi zaslona. Da, poizvedbe za medije je modul CSS3, ki omogoča pretvorbo vsebine v pogoje, kot je ločljivost zaslona na pametnem telefonu ali računalniku. Postati priporočeni standard W3C v juniju 2012 in se danes aktivno uporablja pri razvoju spletnih strani in grafičnem oblikovanju.


Poizvedbe medijev CSS so uporabne, če želite uporabiti sloge na podlagi splošne vrste naprave (kot je tiskanje ali zaslon), posebnih funkcij (kot je širina okna brskalnika) ali okolja (na primer iz svetlobnih pogojev). Veliko število internetnih naprav, ki so danes na voljo, naredi medijske poizvedbe pomembno orodje za ustvarjanje spletnih mest in aplikacij, ki so dovolj stabilne, da delujejo na kateri koli strojni opremi.

Zgodovina

Medijske poizvedbe so bile najprej identificirane v prvotnem stavku CSS Hocon Wium Lie leta 1994, vendar takrat niso postale del CSS1. Priporočilo HTML4 iz leta 1997 je primer, kako lahko te komponente dodate v prihodnosti. Leta 2000 je W3C začel delati na Media Queries. Prvi projekt javnih del za medijske poizvedbe je bil objavljen leta 2001. Specifikacija je postala priporočilo W3C leta 2012brskalniki so dodali podporo.

Kako pišejo v CSS medijskih poizvedbah?

Poizvedbe se lahko vstavijo v datoteko HTML spletne strani ali vključijo v ločeno datoteko .CSS, na katero se nanašajo. Spodaj je opis in primer medijskih poizvedb CSS: @media zaslon in (max-width: 768px) {header {height: 70px;} članek {font-size: 14px;} img {max-width: 480px;}} Request na večpredstavnostnih zgornjih se aktivira, če je okno uporabnika brskalnika široko 768 pik ali manjše. To se lahko zgodi, če okno zaprete na namiznem računalniku ali uporabljate mobilno napravo, na primer tablični računalnik, da si ogledate spletno vsebino.

Kako uporabljati CSS3 medijske poizvedbe?

V ustreznem spletnem oblikovanju medijske poizvedbe delujejo kot filtri za različne velikosti zaslona. Tako kot vsi moduli v kaskadni slogi, tisti, ki se pojavljajo na seznamu, določajo tiste, ki so nad njimi. Zato so privzeti slogi na začetku običajno določeni v dokumentu CSS, ki mu sledijo poizvedbe za različne velikosti zaslona. Najprej lahko na primer določite sloge namizja in nato večpredstavnostno poizvedbo s slogi za tablične uporabnike, nato pa za uporabnike pametnih telefonov. Slogi lahko definirate tudi v obratnem vrstnem redu. Medtem ko je minimalna širina najpogostejša značilnost, ki se uporablja v medijskih poizvedbah, je veliko drugih tudi široko dostopnih. Dimenzije slike v poizvedbah medijev CSS vključujejo:

minimalno širino naprave;

najmanjša višina naprave;

razmerje stranic;

največji barvni indeks;

največresolucijo;

usmerjenost zaslona.

Na primer, ločljivostna vrednost se lahko uporabi za zaznavanje zaslonov HiDPI (kot so slike mrežnice) in prenos slik z visoko ločljivostjo namesto standardnih slik.

Uporaba in napake

Zakaj ne delajo poizvedbe v medijih CSS? Ta komponenta je sestavljena iz vrste medija in enega ali več izrazov, ki uporabljajo medijske funkcije, ki vrnejo true ali false. Rezultat poizvedbe je resničen, če vrsta medija, podana v njej, ustreza vrsti naprave, v kateri je dokument prikazan, in vsi izrazi v večpredstavnostni zahtevi so resnični. V primerih, ko medijske poizvedbe CSS ne delujejo, morate preveriti ustrezna pravila za pravila slogov in kaskadnih pravil. Ti podatki lahko vsebujejo napako.

Vrste medijev

Vrsta medija je lahko deklarirana v glavi dokumenta HTML z atributom "media" znotraj elementa. Vrednost atributa medijev označuje, katera naprava bo prikazala povezani dokument. Vrste medijev lahko tudi deklarirate v navodilih za obdelavo XML, @import at-rule in @media at-rule. Multimedijski tip "all" se lahko uporablja tudi za označevanje, da je slogovna lista uporabljena za vse vrste medijev.

Kaj je CSS?

CSS (Cascading Style Sheet ali Cascading Style Sheets) se uporablja za oblikovanje postavitve spletne strani, definiranje slogov besedila, velikosti tabel in drugih vidikov spletne vsebine, ki je bila prej definirana samo v strukturi strani HTML. CSS pomaga spletnim razvijalcem ustvariti enotno obliko za večstrani. Namesto, da določite vrsto vsake tabele in vsak blok besedila v slogu HTML, se v dokumentu CSS določijo le enkrat. Ko je format določen v kaskadnem slogu, ga lahko uporablja katera koli stran, ki povezuje datoteko CSS. Poleg tega CSS omogoča preprosto spreminjanje slogov na več straneh hkrati. Na primer, spletni razvijalec lahko načrtuje povečanje privzete velikosti besedila s 10 na 12 točk na petdesetih straneh spletnega mesta. Če se vse strani nanašajo na isti slogovni list, se bo velikost besedila dovolj spremenila samo v tabeli, na vseh straneh pa bo prikazana zahtevana velikost.
Čeprav je CSS odličen za ustvarjanje slogov besedila, je uporaben tudi za oblikovanje drugih vidikov postavitve spletne strani. Na primer, CSS se lahko uporablja za določanje polnjenja celic tabele, sloga, debeline in barve obrobe, kot tudi za zapolnitev elementov slike ali drugih predmetov. CSS v primerjavi s HTML-jem spletnim razvijalcem omogoča natančnejši nadzor nad tem, kako izgledajo spletne strani.

Vrste multimedijskih poizvedb

Vrste medijev opisujejo splošno kategorijo naprav. Čeprav so spletne strani običajno zasnovane na zaslonu, lahko programer ustvari sloge, ki so zasnovani za posebne naprave, kot so tiskalniki ali zvočni urejevalniki. Na primer, ta del CSS je za tiskalnike: @media print {}. Prav tako lahko ciljate na več naprav. To pravilo @media na primer za ciljno usmerjanje naprave uporablja dve medijski poizvedbiscreen in print: @media, print {}.

Medijske funkcije CSS

Multimedijske funkcije opisujejo posebne značilnosti uporabniškega agenta, izhodne naprave ali okolja. Na primer, lahko uporabite določene sloge za širokozaslonske monitorje, računalnike ali naprave, ki se uporabljajo v slabih svetlobnih pogojih. V tem primeru se uporabljajo slogi, pri katerih lahko glavni vhodni mehanizem uporabnika (na primer miška) visi nad elementi: @media (hover: hover) {}. Številne multimedijske funkcije so funkcije pasovne širine, kar pomeni, da imajo lahko predpono "min" ali "max-" za izražanje minimalnih ali maksimalnih omejitev. Na primer, ta ukaz bo uporabil sloge samo, če je širina zaslona brskalnika enaka ali manjša od 12450 px: @media (max-width: 12450px) {}. Če ustvarite zahtevo za večpredstavnostne funkcije, ne da bi podali vrednost, bodo uporabljene ugnezdene sloge, dokler vrednost funkcije ni nič. Ta CSS bo na primer veljal za katero koli barvno zaslonsko napravo: @media (barva) {}. Če funkcija ne velja za napravo, na kateri deluje brskalnik, so izrazi, ki vsebujejo to multimedijsko funkcijo, vedno napačni. Na primer, slogi, povezani z naslednjo poizvedbo, ne bodo nikoli uporabljeni, ker nobena govorna naprava nima oblike zaslona: @ media speech in (razmerje stranic: 11/5) {}.

Tehnična specifikacija

Medijske poizvedbe so ključna sestavina prilagodljivega oblikovanja, ki vam omogoča prilagoditev CSS na podlagi različnih parametrov aliznačilnosti naprave. Na primer, večpredstavnostna zahteva lahko uporablja različne sloge, če je zaslon manjši od določene velikosti ali če uporabnik ohrani svojo napravo v pokončnem ali ležečem načinu. Sintaksa multimedijskih zahtev se uporablja tudi v drugih kontekstih, na primer v atributu medija elementa, ki ga je mogoče konfigurirati na nizu multimedijske poizvedbe, da se uporabi za določanje, ali naj se ta vir uporabi pri izbiri določene slike za uporabo v elementu. Metodo Window.matchMedia () lahko uporabite za preverjanje okna v medijski zahtevi. Funkcijo MediaQueryList.addListener () lahko uporabite tudi za opozarjanje, ko se spremeni stanje poizvedb. S to funkcijo se lahko vaše spletno mesto ali aplikacija odziva na konfiguracijo naprave, usmerjenost ali spremembe statusa.

Večpredstavnostne zahteve za slogovne sloge

Adaptive web design je naletelo na počasno nalaganje vsebin. Zdaj je postopek za odpravo te pomanjkljivosti dobro dokumentiran. Obstaja več načinov, kako ga razvijalci uporabljajo za boljše prenašanje vsebine in slik na različne naprave. Eden od njih je uporaba medijskih poizvedb, ki delujejo za klicanje slogov vmesnika naprave glede na njegovo velikost. V preteklosti so programerji zagovarjali, ali so medijske poizvedbe najboljša rešitev za mobilne naprave, in te razprave so še vedno v teku. Zdaj je uradno priznano, da so medijske poizvedbe CSS (medijske poizvedbe) preprost in učinkovit način za prikazovanje različne vsebine za številne naprave inNajpogosteje uporabljene poizvedbe so tiste, ki se nanašajo na višino in širino prikaza.

Klicanje s pomočjo zunanjega slogovnega sloga

CSS-sloge za medijske poizvedbe najprej preverijo vrsto medija za vrstico uporabniškega agenta, preden nadaljujejo s preverjanjem fizičnih atributov pogleda. Gre za oglas CSS, ki ga lahko pokličete s pomočjo zunanjega sloga. Zunanji klic bo izgledal takole :. Preprost klic CSS bo izgledal takole: @media zaslon in (min-width: 320px) in (max-width: 480px) {/* Tukaj vstavite sloge}. Poizvedbe CSS medijev niso modularne in zato lahko otežijo njihovo delo. Zahteva za postavko je podobna zahtevi za prikaz, ker pod določenimi pogoji uporablja CSS. Ti tipi podatkov pa temeljijo na elementih in ne na brskalniku, ki jih trenutno CSS3 ne podpira. Elementarne poizvedbe dobivajo zagon, zlasti ker dopolnjujejo poizvedbe CSS medijev. To pomeni, da lahko oba skupaj skupaj ustvarita modularne in prilagodljive modele.

Delo s slikami

Skaliranje slik za prožno zasnovo je dokaj preprost postopek. Vendar pa je treba obravnavati več vprašanj. To je izguba komponent stiskanja in slik za postavitev vsebine na manjše naprave. Če želite ustvariti prilagodljive slike, v slogovno datoteko dodajte naslednjo kodo: img {max-width: 100%; } To bo zmanjšalo sliko tako, da bo ustrezala velikosti posode, ki je manjša od širine slike. NamestitevNajvečja širina 100% pomeni, da se slika ne bo povečala več kot njena dejanska velikost. Vendar pa je to lahko težava, ko gre za uspešnost spletnega mesta, saj v bistvu za vsako napravo dobite sliko polne velikosti. Za to ni preproste rešitve, še posebej, če delate na spletnem mestu z zastarelimi slikami. Adaptive Images pa je plug-in, ki lahko optimizira vaše slike glede na velikost zaslona. Prilagodljivo oblikovanje, ki temelji na fundaciji Media Foundation Framework, omogoča tudi skupno rabo slik na podlagi velikosti zaslona. Pri delu s slikami morate uporabiti SVG, spletne pisave, spletni tip in CSS.