Požadavky na média CSS - popis, funkce a doporučení

Mediální dotazy - funkce CSS, které umožňuje webové stránky obsah, aby se přizpůsobily různým velikostem obrazovky a oprávnění. Jsou nedílnou součástí flexibilního web design a slouží k přizpůsobení vzhledu webových stránek pro více zařízení s různými velikostmi obrazovek. Ano, dotazy médií - je CSS3 modul, který vám umožní převést obsah do takových podmínek, jako je rozlišení obrazovky chytrého telefonu nebo počítače. Stal se doporučuje standardní W3C v červnu 2012 a je aktivně využívána dnes při vývoji webových aplikací a grafického designu.


CSS mediální dotazy jsou užitečné, pokud chcete aplikovat styl v souladu s obecným typem zařízení (například tisk nebo obrazovka), zvláštní charakteristiky (například šířka okna prohlížeče), nebo na životní prostředí (například z okolních světelných podmínek). Obrovské množství zařízení připojených k Internetu jsou dnes k dispozici, takže dotazy médií nezbytný nástroj pro tvorbu webových stránek a aplikací, které jsou dostatečně stabilní, aby běžet na libovolném hardwaru.

Historie

Mediální dotazy byly poprvé identifikován v úvodní větě CSS Hocon Wium Lie v roce 1994, ale v té době se nestal součástí CSS1. HTML4 Doporučení 1997 ukazuje příklad toho, jak mohou být v budoucnu přidány do těchto složek. V roce 2000 W3C začala pracovat na mediálních dotazy. První projekt veřejných prací pro mediální dotazy byl publikován v roce 2001. Specifikace se stala doporučením W3C v roce 2012 potéprohlížeče přidali podporu.


Jak jsou napsány v dotazech médií CSS?

Žádosti mohou být vloženy do HTML souborů webové stránky, nebo zahrnuty do samostatného souboru CSS, k němuž se vztahuje. Popis a příklad dotazy médií v CSS: @media obrazovky a (max-šířka: 768px) {header {výška: 70 pixelů;} článek {font-size: 14px;} img {max-šířka: 480px;}} Žádost na výše uvedeném médiu je aktivováno, pokud je okno prohlížeče prohlížeče široké nebo menší o 768 pixelů. Tato situace může nastat, pokud jste snížit okno na počítači nebo mobilním zařízení, jako jsou tablety k prohlížení webového obsahu.

Jak používat dotazy médií CSS3?

V příslušném návrhu webových stránek se mediální dotazy chovají jako filtry pro různé velikosti obrazovky. Stejně jako všechny moduly v kaskádových stylů, ty, které se objevují další na seznamu, určit ty, které nad nimi. Protože výchozí styl obvykle definována jako první v CSS dokumentů, následovaný dotazy médií pro různé velikosti obrazovky. Například nejprve lze definovat styl plochu a potom požádat o mediální styly pro uživatele tabletů, a pak - pro uživatele chytrých telefonů. Styly mohou být také definovány v opačném pořadí. Zatímco minimální šířka je nejběžnějším prvkem používaným v mediálních dotazy, mnoho dalších je také široce dostupné. Rozměry snímku v dotazech médií CSS zahrnují:
  • minimální šířku zařízení;
  • minimální výška zařízení;
  • poměr stran;
  • maximální barevný index;
  • maxrozlišení;
  • orientace obrazovky.
  • Například hodnota rozlišení může být použita k detekci HiDPI displejů (jako jsou snímky sítnice) a ke stahování grafiky s vysokým rozlišením namísto standardních obrazů.

    Použití a chyby

    Proč dotazy médií CSS nefungují? Tato složka se skládá z typu média a jednoho nebo více výrazů pomocí funkcí médií, které se vrací buď pravdivé nebo nepravdivé. Výsledek dotazu je pravdivý, pokud typ média, který je v ní určen, odpovídá typu zařízení, ve kterém je dokument zobrazen, a všechny výrazy v multimediální žádosti jsou pravdivé. V případech, kdy dotazy médií CSS nefungují, je třeba zkontrolovat příslušná pravidla pro pravidla stylu a kaskád. Tyto údaje mohou obsahovat chybu.

    Typy médií

    Typ média lze deklarovat v záhlaví dokumentu HTML pomocí atributu "media" uvnitř prvku. Hodnota atributu media označuje, které zařízení zobrazí propojený dokument. Typy médií lze také deklarovat v pokynech pro zpracování XML, @import at-rule a @media at-rule. Multimediální typ "vše" lze také použít k označení, že štítek je použit pro všechny typy médií.

    Co je to CSS?

    CSS (kaskádových stylů nebo kaskádových stylů) se používá pro formátování rozvržení webových stránek, definovat styly textu, velikosti, tabulky a další aspekty webového obsahu, které dříve mohly být definovány pouze v HTML stránkové struktury. CSS pomáhá vývojářům vytvářet jeden formát pro vícestránky stránek. Namísto definování typu každé tabulky a každého bloku textu ve stylu HTML jsou určeny pouze jednou v dokumentu CSS. Pokud je formát určen v kaskádovém stylu, může být použita jakoukoli stránkou, která odkazuje na soubor CSS. Navíc CSS usnadňuje změnu stylů na více stránkách najednou. Například webový vývojář může naplánovat zvýšení výchozí velikosti textu o 10 až 12 bodů na padesát stran webové stránky. Pokud jsou všechny stránky odkazovány na stejný stylový list, velikost textu bude dostatečně změněna pouze v tabulce a na všech stránkách se zobrazí požadovaná velikost.
    Ačkoli CSS je skvělý pro vytváření textových stylů, je také užitečné pro formátování dalších aspektů rozvržení webové stránky. Například CSS lze použít k určení plnění buněk tabulky, stylu, tloušťky a barvy ohraničení, stejně jako k vyplnění prvků obrazu nebo jiných objektů. CSS v porovnání s HTML poskytuje vývojářům webu přesnější kontrolu nad tím, jak vypadají webové stránky.

    Typy multimediálních dotazů

    Typy médií popisují obecnou kategorii zařízení. I když jsou webové stránky obvykle založeny na obrazovce, programátor může vytvářet styly určené pro speciální zařízení, jako jsou tiskárny nebo zvukové editory. Například tento úryvek CSS je určen pro tiskárny: @media print {}. Můžete také cílit na více zařízení. Například toto @ media pravidlo používá dvě dotazy médií k cílení na zařízeníobrazovku a tisk: @media obrazovka, tisk {}.

    Funkce médií CSS

    Multimediální funkce popisují specifické vlastnosti uživatelského agenta, výstupního zařízení nebo prostředí. Například můžete použít určité styly pro širokoúhlé monitory, počítače nebo zařízení, která se používají v podmínkách slabého osvětlení. V tomto příkladu se používají styly, kde hlavní mechanismus vstupu uživatele (například myš) může viset nad prvky: @media (hover: hover) {}. Mnoho multimediálních funkcí je funkce šířky pásma, což znamená, že mohou mít předponu "min" nebo "max-" pro vyjádření minimálních nebo maximálních omezení. Tento příkaz například použije styly, pouze pokud je šířka obrazovky prohlížeče rovna nebo menší než 12450 px: @media (max-width: 12450px) {}. Pokud vytvoříte požadavek na multimediální funkci bez zadání hodnoty, vnořené styly budou použity, dokud nebude hodnota funkce nulová. Například tento CSS se bude vztahovat na jakékoli barevné obrazovkové zařízení: @media (color) {}. Pokud se funkce nevztahuje na zařízení, na kterém prohlížeč funguje, výrazy, které obsahují tuto multimediální funkci, jsou vždy chybné. Například styly připojené k následujícímu dotazu nebudou nikdy použity, protože žádné řečové zařízení nemá formát obrazovky: @media speech a (poměr stran: 11/5) {}.

    Technická specifikace

    Dotazy médií jsou klíčovou součástí adaptivního návrhu, který umožňuje přizpůsobit CSS na základě různých parametrů nebocharakteristiky zařízení. Například média mohou požádat o použití různých stylů, v případě, že displej je menší než určité velikosti, nebo podle toho, zda uživatel má svůj přístroj na výšku nebo na šířku režimu.
    Syntaxe požadavků na média se používá také v jiných kontextech, například v médiích atributu prvku, který může být nakonfigurován tak, aby média řetězec dotazu použít k určení, zda se má použít tento zdroj při výběru konkrétního obrazu pro použití v prvku. Metoda Window.matchMedia () lze použít k otestování okna na požadavek média. Můžete také použít funkci MediaQueryList.addListener () pro výstrahu, jestliže stát požádá. Pomocí této funkce mohou vaše stránky nebo aplikace reagovat na konfiguraci zařízení, orientaci nebo změny stavu.

    Multimediální žádosti o styly stylů

    Adaptivní návrh webových stránek se setkal s pomalým stahováním obsahu. Nyní je proces eliminace této nevýhody dobře zdokumentován. Existuje několik způsobů, jak ji vývojáři využívají k lepšímu stahování obsahu a obrázků na různých zařízeních. Jedním z nich je použití mediálních dotazů, které umožňují volat styly rozhraní zařízení na základě jejich velikosti. V minulosti programátoři argumentovali, zda jsou mediální dotazy nejlepší řešení pro mobilní zařízení a že tyto debaty stále probíhají. Nyní oficiálně uznal, že CSS pomocí dotazů na média (média dotazy) - je jednoduchý a účinný způsob, jak do provozu jiný obsah pro řadu zařízení, aNejčastěji používané dotazy jsou ty, které odkazují na výšku a šířku výřezu.

    Volání pomocí externího stylu

    Styly stylů CSS pro mediální dotazy nejprve zkontrolujte typ média pro řádek uživatelského agenta předtím, než zkontrolujete fyzické atributy výřezu. Jsou to reklamy CSS, které lze volat pomocí externího stylu. Externí volání bude vypadat takto :. Přímé volání CSS bude vypadat takto: @media obrazovka a (min-width: 320px) a (max-width: 480px) {/* Vložte své styly zde}. CSS mediální dotazy nejsou modulární a mohou proto komplikovat jejich práci. Požadavek na položku je podobný požadavku na zobrazení, protože používá za určitých podmínek službu CSS. Tyto typy dat jsou však založeny spíše na prvky než na prohlížeči, které v současné době nejsou podporovány v CSS3. Prvotní dotazy získávají dynamiku, zejména proto, že doplňují dotazy médií CSS. To znamená, že oba mohou skončit společně a vytvářet modulární a flexibilní konstrukce.
    Práce s obrázky
    Zvětšování obrazu pro flexibilní návrh je poměrně jednoduchý proces. Existuje však několik otázek, které je třeba řešit. Jedná se o ztrátu kompresních komponent a obrazů pro umístění obsahu na menší zařízení. Chcete-li vytvářet škálovatelné obrázky, přidejte do listu stylů následující kód: img {max-width: 100%; } Tím snížíte obraz tak, aby odpovídal velikosti kontejneru, která je menší než šířka obrázku. InstalaceMaximální šířka 100% znamená, že se obraz nezvýší více než jeho skutečná velikost. To však může být problém, pokud jde o výkonnost webu, protože v podstatě přinášíte obrázek v plné velikosti pro každé zařízení. Není k tomu snadné řešení, zvláště pokud pracujete na webu s zastaralými obrázky. Nicméně, Adaptivní obrázky je plug-in, který může optimalizovat vaše snímky na základě velikosti obrazovky. Adaptivní návrh založený na Media Foundation Framework Foundation také umožňuje sdílet obrázky na základě velikosti obrazovky. Při práci s obrázky musíte používat SVG, webové písma, typ webu a CSS.

    Související publikace