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

Požadavky na média jsou funkce CSS, která umožňuje přizpůsobit obsah webové stránky různým velikostem a rozlišením obrazovky. Jsou nedílnou součástí flexibilního návrhu webových stránek a slouží k přizpůsobení vzhledu webových stránek pro více zařízení s různou velikostí obrazovky. Media Queries je tedy modul CSS3, který umožňuje převést obsah do takových podmínek, jako je rozlišení obrazovky smartphonu nebo počítače. V červnu 2012 se stal doporučeným standardem W3C a dnes se aktivně využívá ve vývoji webových stránek a grafickém designu.

Media dotazy CSS jsou užitečné, pokud chcete použít styly v závislosti na obecném typu zařízení (například tiskem nebo obrazovky), zvláštní charakteristiky (například prohlížeč šířka výřezu) nebo prostředí (například na okolních světelných podmínkách). Obrovské množství zařízení připojených k Internetu jsou dnes k dispozici, je media požaduje důležitý nástroj pro tvorbu webových stránek a aplikací, které jsou dostatečně stabilní, aby běžet na libovolném hardwaru.

Historie

Požadavky na média byly poprvé identifikovány v původním návrhu CSS Hocon Wium Lie v roce 1994, ale v té době se nestaly součástí CSS1. Doporučení HTML4 z roku 1997 ukazuje příklad toho, jak lze tyto komponenty v budoucnu přidávat.

V roce 2000 začala W3C pracovat na mediálních dotazy. První veřejný pracovní projekt pro média byl zveřejněn v roce 2001. Specifikace se stala doporučením W3C v roce 2012 poté, co prohlížeč přidal podporu.

Jak jsou požadavky na média psány v CSS?

Dotazy lze vložit do souboru HTML webové stránky nebo do samostatného souboru .CSS, ke kterému odkazuje. Níže je popis a příklad mediálního dotazu v CSS:

@media obrazovka a (max-šířka: 768px)

{{

hlavička {height: 70px; }}

článek {font-size: 14px; }}

img {max-šířka: 480px; }}

}}

Požadavek na multimédia je aktivován, pokud je okno prohlížeče uživatele široké nebo menší o 768 pixelů. K tomu může dojít, pokud zkrátíte okno na stolním počítači nebo použijete mobilní zařízení, například tablet, k zobrazení obsahu webu.

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

V reakci na návrh webových stránek se mediální požadavky chovají jako filtry pro různé velikosti obrazovky. Stejně jako všechny moduly v kaskádovém stylu, ty, které se objevují dále v seznamu, převyšují ty, které jsou nad nimi. Standardní styly jsou proto obvykle definovány nejprve v dokumentu CSS, následované mediálními dotazy pro různé velikosti obrazovky. Můžete například nejprve definovat styly prostředí, potom multimediální dotaz se styly pro uživatele tablet a potom pro uživatele smartphonů. Styly lze také definovat v opačném pořadí.

Zatímco minimální šířka je nejběžnější funkce používaná v mediálních dotazy, mnoho dalších je také široce dostupné. Rozměry obrázků v požadavcích na média CSS zahrnují:

• minimální šířka zařízení;
• minimální výška zařízení;
• poměr stran;
• maximální barevný index;
• maximální rozlišení;
• orientaci obrazovky.

Například hodnota rozlišení může být použita k detekci HiDPI displejů (jako jsou obrazy sítnice) a ke stahování grafiky s vysokým rozlišením namísto standardních obrazů.

Použití a chyby

Proč žádosti 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 zadaný v tomto souboru odpovídá typu zařízení, na kterém je dokument zobrazen a všechny výrazy v dotazu na médium jsou pravdivé. V případech, kdy požadavky na média CSS nefungují, je třeba zkontrolovat příslušná pravidla stylů a kaskádové pravidla. Snad tyto údaje obsahují chybu.

Typy médií

Typ média lze deklarovat v záhlaví dokumentu HTML pomocí atributu "media" uvnitř prvku . Hodnota atributu "media" označuje, na kterém zařízení bude přidružený dokument zobrazen. Typy médií lze také deklarovat v pokynech pro zpracování XML, @import at-rule a @media at-rule. Mnohostranný pohled "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ý stylový list nebo kaskádové styly) se používá k formátování webových stránek rozlišením layout stylů textu, velikosti, tabulky a další aspekty webového obsahu, které dříve mohly být definovány pouze v stránku HTML struktury.

CSS pomáhá vývojářům vytvářet jeden formát pro několik stránek webu. Namísto definování vzhledu každé tabulky a každého bloku textu v HTML jsou styly definovány pouze jednou v dokumentu CSS. Pokud je formát definován 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 se všechny stránky vztahují na stejný stylový styl, velikost textu se změní pouze v tabulce a na všech stránkách bude správná 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 můžete použít CSS k definování výplně buněk v tabulce, stylu, tloušťce a barvu ohraničení nebo pro vyplnění prvků obrazu nebo jiných objektů. CSS ve srovnání s HTML poskytuje vývojářům webu přesnější kontrolu nad tím, jak budou vypadat webové stránky.

Typy multimediálních dotazů

Typy médií popisují obecnou kategorii zařízení. Zatímco webové stránky jsou obvykle navrženy s ohledem na obrazovky, programátor může vytvářet styly navržené pro speciální zařízení, jako jsou tiskárny nebo zvukové editory. Například tento kód CSS je určen pro tiskárny: @media tisk {...}.

Můžete také cílit na více zařízení. Toto pravidlo @ media například používá dvě požadavky na média pro cílení na obrazovku a zařízení pro tisk: @media, vytiskněte {...}.

CSS Media Features

Multimediální funkce popisují specifické vlastnosti uživatelského agenta, výstupního zařízení nebo prostředí. Například můžete použít některé 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 jsou styly aplikovány, když hlavní mechanismus vstupu uživatele (například myš) může viset nad položkami: @media (vznášejte se: vznášejte se) {...}.

Mnoho multimediálních funkcí je funkcí rozsahu, což znamená, že mohou mít předponu "min;" nebo "max;" pro vyjádření minimálních nebo maximálních omezení podmínek. Tento příkaz například použije styly pouze v případě, že šířka výřezu prohlížeče se rovná nebo je menší než 12.450px: @media (max-šířka: 12450px) {...}.

Pokud vytvoříte dotaz multimediální funkce bez zadání hodnoty, použijí se vnořené styly, dokud nebude hodnota funkce nula. Tento CSS se například bude vztahovat na libovolné zařízení s barevnou obrazovkou: @media (barva) {...}.

Pokud se funkce nevztahuje na zařízení, na kterém je prohlížeč spuštěn, výrazy obsahující tuto multimediální funkci jsou vždy nepravdivé. Například styly vnořené v následujícím dotazu nebudou nikdy použity, protože žádné řečové zařízení nemá formát obrazovky: @media speech (poměr stran: 11/5) {...}.

Technická specifikace

Mediální dotazy jsou klíčovou součástí adaptivního návrhu, který umožňuje přizpůsobit CSS na základě různých parametrů nebo vlastností zařízení. Například multimediální dotaz může použít různé styly, pokud je obrazovka menší než určitá velikost nebo podle toho, zda uživatel udržuje zařízení v režimu na výšku nebo na šířku.

Syntaxe požadavků na multimédia je také použita v jiných kontextech, například v atributu média prvku , který lze naladit na multimediální řetězec dotazu, který určuje, zda má tento zdroj použít při výběru určitého obrázku pro použití v prvku .

Metoda Window.matchMedia () lze použít pro kontrolu okna na žádost v médiích. Tuto funkci můžete použít také MediaQueryList.addListener () upozornit na změnu stavu požadavků. Díky této funkci bude váš web nebo aplikace schopna reagovat na konfiguraci zařízení, orientaci nebo změny stavu.

Multimediální dotazy pro styly volání

Adaptivní webový design se setkal s pomalým stahováním obsahu. Nyní je proces odstranění tohoto nedostatku dobře zdokumentován. Existuje několik způsobů, jak mohou vývojáři lépe stahovat obsah a obrázky na různých zařízeních.

Jedním z nich je použití mediálních dotazů, které pracují na vyvolání stylů uživatelského zařízení podle jeho velikosti. V minulosti programátoři argumentovali o tom, zda jsou mediální žádosti nejlepším řešením v případě mobilních zařízení, a tato debata pokračuje. Nyní oficiálně uznal, že CSS pomocí dotazů na média (média dotazy) - je jednoduchý a účinný způsob, jak opravit celou řadu obsahu pro řadu přístrojů a nejčastěji používané dotazy - pravidla týkající se výšky a šířky výřezu.

Volání pomocí externího stylu

Styly CSS pro dotazy médií nejprve zkontrolujte typ média v řetězci uživatelského agenta předtím, než provedete kontrolu fyzických atributů výřezu. Jedná se o deklaraci CSS, kterou lze vyvolat pomocí externího stylu. Externí volání bude vypadat takto: <odkaz rel = "stylesheet" mediální = "a (min šířka: 320) a (max-šířka: 480px)" section "css / yourstylesheet.css" />.

Přímá volba CSS bude vypadat takto:

@media obrazovka a (min-width: 320px)

a (max-šířka: 480px) {

/ * Zde vložte své styly

}.

Zprávy médií CSS nejsou modulární, což znamená, že jejich práce může být obtížnější. Požadavek na prvek je podobný dotazu pro média, protože používá CSS, pokud jsou splněny určité podmínky. Tyto typy dat jsou však založeny na prvcích, nikoliv na prohlížeči, které nejsou v CSS3 aktuálně podporovány. Prvotní dotazy získávají dynamiku, zejména proto, že doplňují požadavky na média CSS. To znamená, že oba mohou nakonec společně pracovat na vytvoření modulárnějších a flexibilnějších návrhů.

Práce s obrázky

Zvětšování obrazu pro flexibilní návrh je poměrně jednoduchý proces. Existuje však několik problémů, které je třeba řešit. Jedná se o ztrátu částí a obrázků při kompresi, aby obsah na stránce na menších zařízeních. Chcete-li vytvořit škálovatelné obrázky, jednoduše přidejte následující kód do stylu:

img {

max-šířka: 100%

}}

Tím se zmenší obraz tak, aby odpovídal velikosti kontejneru, který je menší než šířka obrázku. Nastavení maximální šířky na 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 každému zařízení obrázek v plné velikosti. K tomu není jednoduché řešení, zvláště pokud pracujete na webu se zastaralými obrázky. Nicméně, Adaptivní obrázky je plug-in, který může optimalizovat vaše snímky podle velikosti obrazovky. Adaptivní návrh založený na Media Foundation Framework 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.