Dotazovanie médií je funkcia CSS, ktorá umožňuje prispôsobenie obsahu webovej stránky rôznym rozmerom a povoleniam obrazovky. Sú neoddeliteľnou súčasťou flexibilného dizajnu webových stránok a používajú sa na prispôsobenie vzhľadu webových stránok pre viaceré zariadenia s rôznymi veľkosťami obrazovky. Áno, aplikácia Media Queries je modul CSS3, ktorý umožňuje konvertovať obsah na podmienky, ako je rozlíšenie obrazovky na smartphone alebo počítači. Staňte sa odporúčaným štandardom W3C v júni 2012 a dnes sa aktívne používa v oblasti vývoja webových stránok a grafického dizajnu.
Otázky médií CSS sú užitočné, ak chcete použiť štýly založené na všeobecnom type zariadenia (ako je tlač alebo obrazovka), špecifické funkcie (napríklad šírka okna prehliadača) alebo prostredie napríklad pri okolitých svetelných podmienkach). Obrovský počet zariadení, ktoré sú k dispozícii na internete, spôsobuje, že mediálne dopyty sú dôležitým nástrojom na vytváranie webových stránok a aplikácií, ktoré sú dostatočne stabilné na to, aby fungovali na akomkoľvek hardvéri.
História
Mediálne otázky boli prvýkrát identifikované v pôvodnej vete CSS Hocon Wium Lie v roku 1994, ale v tom čase sa nestali súčasťou CSS1. Odporúčanie HTML4 z roku 1997 poskytuje príklad toho, ako môžu byť tieto komponenty pridané v budúcnosti. V roku 2000 W3C začala pracovať na mediálnych dopytoch. Prvý projekt verejných prác pre mediálne otázky bol uverejnený v roku 2001. Špecifikácia sa stala odporúčaním W3C v roku 2012 poprehliadače pridali podporu.
Ako sú písané v médiách CSS?
Žiadosti môžu byť vložené do HTML súborov webové stránky, alebo zahrnuté do samostatného súboru CSS, na ktorý sa vzťahuje. Popis a príklad otázky médií v CSS: @media obrazovky a (max-šírka: 768px) {header {výška: 70 pixelov;} článok {font-size: 14px;} img {max-šírka: 480px;}} Žiadosť na multimédiách vyššie, ak je okno používateľa prehliadača široké alebo menšie ako 768 pixelov. Táto situácia môže nastať, ak ste znížiť okno na počítači alebo mobilnom zariadení, ako sú tablety na prezeranie webového obsahu.
Ako používať dotazy médií CSS3?
Vo vhodnom dizajne webových stránok sa mediálne dopyty správajú ako filtre pre rôzne veľkosti obrazovky. Rovnako ako všetky moduly v kaskádových štýlov, tie, ktoré sa objavujú ďalšie na zozname, určiť tie, ktoré nad nimi. Predvolené štýly sa preto zvyčajne definujú najskôr v dokumente CSS, po ktorom nasledujú mediálne dopyty pre rôzne veľkosti obrazovky. Napríklad najprv možno definovať štýl plochu a potom požiadať o mediálnej štýly pre používateľov tabletov, a potom - pre užívateľov inteligentných telefónov. Štýly je možné definovať aj v opačnom poradí. Zatiaľ čo minimálna šírka je najbežnejšou funkciou používanou v mediálnych dopytoch, mnohé ďalšie sú tiež široko dostupné. Rozmery obrázka v mediálnych dopytoch CSS zahŕňajú:
minimálnu šírku zariadenia;
minimálna výška zariadenia;
;
maximálny index farieb;
maximálnerozlíšenie;
orientácia obrazovky.
Napríklad, hodnota povolenia môže byť použitá na identifikáciu HiDPI displeja (ako sú obrazy sietnice) a sťahovanie vysokom rozlíšení slovami namiesto štandardných obrazov.
Použitie a chyby
Prečo nefungujú dotazy médií CSS? Táto zložka sa skladá z typu média a jedného alebo viacerých výrazov s použitím funkcií médií, ktoré sa vracajú buď pravdivé alebo nepravdivé. Výsledkom dotazu je pravda v prípade, že typ média je uvedené v ňom zodpovedá typu zariadenia, ktoré zobrazuje dokument, všetky výrazy v dotaze médiá sú pravdivé. Keď nefunguje médiá pýta CSS, mali by ste si overiť príslušné pravidlá a predpisy kaskádové štýl. Tieto údaje môžu obsahovať chybu.
Druhy tlačových médií
Typ média môžu byť uvedené v záhlaví HTML dokumentu pomocou atribútu «média» vnútri prvku. Hodnota atribútu médií označuje, ktoré zariadenie bude zobrazovať prepojený dokument. typy médií tiež byť oznámené v návode XML spracovania, @import at-právneho a @media at-pravidlo. Multimediálny typ "všetko" môže byť tiež použitý na označenie, že štýl štýlu sa aplikuje na všetky typy médií.
Čo je to CSS?
CSS (kaskádových štýlov alebo kaskádových štýlov) sa používa pre formátovanie rozvrhnutie webových stránok, definovať štýly textu, veľkosti, tabuľky a ďalšie aspekty webového obsahu, ktoré predtým mohli byť definované iba v HTML stránkové štruktúry. CSS pomáha vývojárom vytvoriť jeden formát pre viacerostránok stránok. Namiesto definovania typu každej tabuľky a každého bloku textu v štýle HTML sa určuje iba raz v dokumente CSS. Keď je formát určený v kaskádovom štýle, môže byť použitý ľubovoľnou stránkou, ktorá odkazuje na súbor CSS. Navyše CSS umožňuje jednoducho meniť štýly na viacerých stránkach naraz. Napríklad webový vývojár môže naplánovať zvýšenie predvolenej veľkosti textu o 10 až 12 bodov na päťdesiat strán webovej stránky. Ak sú všetky stránky odkazované na ten istý štýl, veľkosť textu bude dostatočne zmenená iba v tabuľke a na všetkých stránkach sa zobrazí požadovaná veľkosť. Hoci je CSS skvelé pre vytváranie textových štýlov, je tiež užitočné pre formátovanie ďalších aspektov rozloženia webovej stránky. Napríklad CSS sa môže použiť na určenie plnenia buniek tabuľky, štýlu, hrúbky a farby okrajov, ako aj na vyplnenie prvkov obrazu alebo iných objektov. CSS, v porovnaní s HTML, dáva vývojárom webu presnejšiu kontrolu nad tým, ako webové stránky vyzerajú.
Typy multimediálnych dopytov
Typy médií opisujú všeobecnú kategóriu zariadenia. Aj keď webové stránky sú zvyčajne na obrazovke, programátor môže vytvárať štýly určené pre špeciálne zariadenia, ako sú tlačiarne alebo zvukové editory. Tento úryvok CSS je napríklad určený pre tlačiarne: @media print {}. Môžete tiež zacieliť na viaceré zariadenia. Napríklad toto pravidlo @media používa dve ciele médií na zacielenie na zariadenieobrazovku a tlač: @media obrazovka, tlač {}.
Funkcie médií CSS
Multimediálne funkcie opisujú špecifické vlastnosti užívateľského agenta, výstupného zariadenia alebo prostredia. Môžete napríklad použiť určité štýly pre širokouhlé monitory, počítače alebo zariadenia, ktoré sa používajú v podmienkach s nízkym osvetlením. V tomto príklade sa používajú štýly, kde hlavný vstupný mechanizmus používateľa (napríklad myš) môže visieť nad prvkami: @media (hover: hover) {}. Mnohé multimediálne funkcie sú funkcie šírky pásma, čo znamená, že môžu mať predponu "min" alebo "max-" na vyjadrenie minimálnych alebo maximálnych obmedzení. Tento príkaz napríklad použije štýly iba vtedy, ak je šírka obrazovky prehliadača rovné alebo menšia než 12450 px: @media (max-width: 12450px) {}. Ak vytvoríte žiadosť o multimediálnu funkciu bez určenia hodnoty, vnorené štýly sa použijú dovtedy, kým sa hodnota funkcie nezmení. Napríklad tento CSS sa bude vzťahovať na akékoľvek farebné obrazovkové zariadenie: @media (color) {}. Ak sa funkcia nevzťahuje na zariadenie, na ktorom prehliadač funguje, výrazy obsahujúce túto multimediálnu funkciu sú vždy chybné. Štýly pripojené k nasledujúcemu dotazu sa nikdy nebudú používať, pretože žiadne rečové zariadenie nemá formát obrazovky: @media speech a (pomer strán: 11/5) {}.
Technická špecifikácia
Mediálne otázky sú kľúčovou súčasťou adaptačného návrhu, ktorý umožňuje prispôsobiť CSS na základe rôznych parametrov alebovlastnosti zariadenia. Napríklad médiá môžu požiadať o použití rôznych štýlov, v prípade, že displej je menšie ako určitej veľkosti, alebo podľa toho, či používateľ má svoj prístroj na výšku alebo na šírku režime.
Syntax požiadaviek na médiá sa používa aj v iných kontextoch, napríklad v médiách atribútu prvku, ktorý môže byť nakonfigurovaný tak, aby médiá reťazec dotazu použiť na určenie, či sa má použiť tento zdroj pri výbere konkrétneho obrazu pre použitie v prvku. Metóda Window.matchMedia () sa dá použiť na kontrolu okna na žiadosť o médiá. Môžete tiež použiť funkciu MediaQueryList.addListener () pre výstrahu, ak štát požiada. Pomocou tejto funkcie môže vaša stránka alebo aplikácia reagovať na konfiguráciu zariadenia, orientáciu alebo zmeny stavu.
Žiadosť o štýle, multimediálny volania
responzívne dizajn webu stretávajú s pomalým sťahovanie obsahu. Teraz je proces odstránenia tejto nevýhody dobre zdokumentovaný. Existuje niekoľko spôsobov, ako to vývojári používajú na lepšie sťahovanie obsahu a obrázkov na rôznych zariadeniach. Jedným z nich je použitie mediálnych dopytov, ktoré umožňujú volať štýly rozhrania zariadenia na základe ich veľkosti. V minulosti programátori sa dohadovali o tom, či je médium potrebuje najlepšie riešenie v prípade mobilných zariadení, a debata stále pokračuje. Teraz oficiálne uznal, že CSS pomocou dotazov na médiá (médiá otázky) - je jednoduchý a účinný spôsob, ako do prevádzky iný obsah pre množstvo zariadení, aNajčastejšie používané dopyty sú tie, ktoré sa vzťahujú na výšku a šírku výrezu.
Challenge pomocou externého štýlov
CSS štýly pre otázky médií najprv skontrolovať typ média na reťazec agenta užívateľa pred odchodom skontrolovať okná fyzikálnych vlastností. Ide o reklamu CSS, ktorú je možné nazývať pomocou externého štýlu. Externý hovor bude vyzerať takto :. Priamy hovor CSS bude vyzerať takto: @media obrazovka a (min-width: 320px) a (max-width: 480px) {/* Vložte svoje štýly tu}. Otázky médií CSS nie sú modulárne a preto môžu komplikovať ich prácu. Požiadavka na položku je podobná požiadavke na zobrazenie, pretože používa CSS za určitých podmienok. Avšak tieto typy údajov sú založené skôr na elementoch než na prehliadači, ktoré v súčasnosti nie sú podporované v systéme CSS3. Prvotné vyšetrovania nadobúdajú dynamiku, najmä preto, že dopĺňajú dopyty médií CSS. To znamená, že obaja môžu skončiť spoluprácou pri vytváraní modulárnych a flexibilných návrhov.
Práca s obrázkami
Zmena veľkosti obrázkov pre flexibilný dizajn je pomerne jednoduchý proces. Existuje však niekoľko otázok, ktoré je potrebné riešiť. Jedná sa o stratu kompresných komponentov a obrázkov na umiestnenie obsahu na menšie zariadenia. Pre vytvorenie zmenšeného obrázku, potom pridajte nasledujúci kód v štýlov: img {max-width: 100%; } Tým sa zmenší obraz tak, aby zodpovedal veľkosti kontajnera, ktorá je menšia ako šírka snímky. rastlinaMaximálna šírka 100% znamená, že obraz sa nezvýši viac ako jeho skutočná veľkosť. To však môže byť problém, pokiaľ ide o výkonnosť stránky, pretože v podstate dodáte obrázok v plnej veľkosti pre každé zariadenie. Nie je k dispozícii žiadne jednoduché riešenie, najmä ak pracujete na stránkach s zastaranými obrázkami. Avšak Adaptive Images je plug-in, ktorý dokáže optimalizovať obrázky na základe veľkosti obrazovky. Adaptívny dizajn založený na platforme Media Foundation Framework vám tiež umožňuje zdieľať obrázky na základe veľkosti obrazovky. Pri práci s obrázkami potrebujete použiť SVG, webové písma, webový typ a CSS.