Dotazy na média - Media queries - Wikipedia

Dotazy na média je funkce CSS 3 umožňující vykreslování obsahu přizpůsobit se různým podmínkám, jako je rozlišení obrazovky (např. velikost obrazovky pro mobilní zařízení a plochu). Stalo se to Doporučeno W3C standard v červnu 2012,[1] a je základní technologií technologie responzivní webdesign (RWD).

Dějiny

Nejprve byly načrtnuty dotazy na média Håkon Wium Lie původní návrh CSS v roce 1994,[2] ale nestali se součástí CSS 1. The HTML4 Doporučení z roku 1997 ukazuje příklad toho, jak lze v budoucnu přidat mediální dotazy.[3] V roce 2000 začala W3C pracovat na mediálních dotazech a také na dalším schématu pro podporu různých zařízení: CC / PP. Oba řeší stejný problém, ale CC / PP je serverově orientovaný, zatímco dotazy médií jsou zaměřené na prohlížeč.[4] První veřejný pracovní koncept pro dotazy médií byl publikován v roce 2001,[5] a specifikace se stala doporučením W3C v roce 2012 poté, co prohlížeče přidaly podporu.

Používání

Mediální dotaz se skládá z a typ média a jeden nebo více výrazů zahrnujících funkce médií, které se rozhodují buď jako pravdivé nebo nepravdivé Výsledek dotazu je pravdivý, pokud se typ média zadaný v dotazu na médium shoduje s typem zařízení, na kterém je dokument zobrazen, a všechny výrazy v dotazu na média jsou pravdivé. Když je mediální dotaz pravdivý, použije se odpovídající šablona stylů nebo pravidla stylů podle běžných kaskádových pravidel.[6][7]Mediální dotazy používají @média "Pravidlo" CSS.

Příklady

Následují příklady mediálních dotazů CSS:

@média obrazovka a (zobrazovací mód: celá obrazovka) {  / * Kód zde platí pouze pro obrazovky v režimu celé obrazovky * /}
@média Všechno a (orientace: krajina) {  / * Kód zde platí pouze pro orientaci na šířku * /}
@média obrazovka a (min. šířka zařízení: 500 pixelů) {  / * Kód zde platí pouze pro obrazovky široké nebo větší než 500 pixelů * /}

Typy médií

Typ média lze deklarovat v záhlaví souboru HTML dokument využívající atribut „media“ uvnitř a <odkaz> živel. Hodnota atributu „media“ určuje, na jakém zařízení se propojený dokument zobrazí.[8] V rámci lze deklarovat také typy médií XML pokyny ke zpracování, @import u-pravidlo, a @média podle pravidla. CSS 2 definuje jako typy médií následující:[9]

  • vše (vhodné pro všechna zařízení)
  • Braillovo písmo
  • reliéfní
  • ruční
  • tisk
  • projekce
  • obrazovka
  • mluvený projev
  • tty
  • televize

Typ média „vše“ lze také použít k označení, že šablona stylů platí pro všechny typy médií.[10]

Funkce médií

Následující tabulka obsahuje funkce médií uvedené v nejnovějším doporučení W3C pro dotazy médií ze dne 6. června 2007.[11]

VlastnostiHodnotaMin./maxPopis
barvacelé čísloAnopočet bitů na barevnou složku
index barevcelé čísloAnopočet položek v tabulce pro vyhledávání barev
poměr stran zařízeníinteger / integerAnopoměr stran
výška zařízenídélkaAnovýška výstupního zařízení
šířka zařízenídélkaAnošířka výstupního zařízení
mřížkacelé čísloNetrue pro zařízení založené na mřížce
výškadélkaAnovýška vykreslovací plochy
černobílýcelé čísloAnopočet bitů na pixel ve vyrovnávací paměti monochromatického rámečku
orientace„na výšku“ nebo „na šířku“Neorientace obrazovky
rozlišenírozlišení ("dpi", "dpcm" nebo "dppx")Anorozlišení
skenovat„progresivní“ nebo „prokládaný“Neproces skenování typů médií „tv“
šířkadélkaAnošířka vykreslovací plochy

Reference

  1. ^ Historie publikací s dotazy na média 19. června 2012
  2. ^ Håkon Wium Lie. „Kaskádové šablony stylů HTML“. Citováno 20. ledna 2013.
  3. ^ "Základní datové typy HTML". www.w3.org.
  4. ^ „Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 ([email protected] from July 2002)“. lists.w3.org.
  5. ^ „Dotazy na média“. www.w3.org.
  6. ^ „CSS media queries“. Síť Mozilla Developer Network a jednotliví přispěvatelé. Citováno 28. dubna 2017.
  7. ^ „Jak vytvářet dotazy na média v responzivním webovém designu“. TechRepublic.
  8. ^ „Značka odkazu HTML“. W3Schools. Citováno 28. dubna 2017.
  9. ^ „Dotazy na média“. World Wide Web Consortium. Citováno 28. dubna 2017.
  10. ^ „Dotazy na média“. World Wide Web Consortium. Citováno 28. dubna 2017.
  11. ^ „Dotazy na média“. Sitepoint. Citováno 28. dubna 2017.

externí odkazy