CSS Media Dotazy: krok za krokem popis, rysy a recenze

Kdysi dávno, ty, kteří navštíví webové stránky pro chytré telefony a podobná mobilní zařízení, které způsobují jiní jen směje. Mnozí prostě nemohl pochopit, proč je to nutné, protože tam je takový pohodlný stolní počítače! Nebo, v nejhorším případě, notebooky. Kromě toho, že mobilní Internet pak bylo drahé.

Čas plynul. Internet zlevnily. Prodej vyšel další a další telefony a tablety. O nějaký čas později, majitelé populárních míst zmatený drbal se na hlavě. Podle statistických údajů se ukázalo, že jejich zdroje jsou častěji navštěvovat své smartphony než s pevným PC!

V té době lokality nebyly optimalizovány pro prohlížení na mobilních zařízeních. Chystáte se do starého života v telefonu, měli byste se spokojit s malými písmeny, malé položky menu a tlačítek nepříjemné.

Příchod CSS Media dotazů

Vyvstala potřeba ukládat prostředky tak, aby vypadají dobře při pohledu z kterékoliv obrazovky. První šířit praxi, kterým se stanoví samostatné stránky pro jednotlivé velikosti. Například návštěvníci, kteří používají mobilní telefon, dostanete se na jeden zdroj, a ten, který je „sedí“ s počítačem - na straně druhé. Ale byla to dlouhá, drahé a nepraktické.

Pak přišel CSS3 dotazy médií. S nimi přišla pouhou možnost provádění dynamického designu.

Co je dynamický design?

Tento termín se používá v případě, že vzhled prostředku se mění v závislosti na velikosti obrazovky, na které procházíte. Jak tomu rozumět? Je to jednoduché.

Představte si, že máte webové stránky. V jeho horní části je navigační menu. Ve vodorovné poloze. Rozkládá se přes celou šířku stránky. Pod ním je blok s kontaktními informacemi. Telefonní a adresa také umístěny dva bloky a jsou uspořádány vodorovně vedle sebe. V rámci tohoto bloku - hlavní obsah a vlevo nebo vpravo je sidebar. Níže, jak je obvyklé, zápatí.

Tento "klasický" layout diagram. Je ideální pro osobní počítač, ale ne příliš vhodné pro mobilní telefony. Horizontální menu je příliš široká. Kontakty jsou umístěny daleko od sebe. Chcete-li použít informace z postranního panelu a všichni budou muset posunout obrazovku, a to není každému po chuti.

Tento problém lze vyřešit pomocí adaptivní a mobilní design s CSS3 dotazy médií. Pomocí médií dotazů jsme rekonstruovat umístění obsahu ... Teď to funguje takhle:

• top - jednotka s vertikálním menu navigace;
• pod ním - bloku s kontakty, které jsou nyní ve svislé poloze;
• sidebar obsah není zobrazen na straně obsah tagu a nad ní.

Jedná se o jednoduchý příklad toho, co lze udělat s Citlivé Web Design dotazy médií. Ve skutečnosti mnohem více možností.

Takže to, co je na dotazy médií?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Pod CSS Media Dotazy CSS3 pochopit pojem modul, pomocí kterého můžete provádět obsah stránky přizpůsobit určitým podmínkám. Například začne reagovat na velikost obrazovky, nebo orientace zařízení (na výšku / na šířku).

Protože systém chápe, že je třeba změnit obsah? Používá mediální dotazy. Uvádějí určité parametry. Pokud zařízení, ze které návštěvník přišel na místo splňuje tyto parametry, včetně pre-předpis stylů. Mohou být zapsán jako totální CSS tabulky, nebo v samostatném souboru.

Kompatibilita CSS Media Dotazy Browser

Safari до Chrome. Všechny moderní prohlížeče podporují tuto technologii, ze Safari na Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Samozřejmě, že uživatelé starších verzí aplikace Internet Explorer mít problém ... ale přiznejme si to upřímně - ti, kteří stále používají starší IE, cokoliv může způsobit problémy.

Syntax adaptivní layout Media Dotazy

html. Možná, že jste byli vystaveni na dotazy médií po připojení souboru stylu HTML. Nezapomeňte, že linku? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Někdy se na konci přidává další parametr který vypadal jako: media = ‚obrazovky‘.

To je mediální dotaz! Ten znamená, že daný soubor styl bude pracovat na zařízení vybavených televizorech. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Místo toho můžete zadat obrazovky tisku - v tomto případě, styly souboru jsou použity v případě, že stránka se vytiskne.

Můžete použít následující atributy:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; all - univerzální verze, použitý tichu, se aplikuje ve všech případech;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - obrazovky (počítače, notebooky, tablety, smartphony, a vše, co je vybavena displejem);
• принтеры; tisk - tiskárny;
• – проекторы; projekce - projektor;
• – речевые браузеры; řeč - řeč prohlížeče;
• – для устройств для слабовидящих; slepecké písmo - zařízení pro zrakově postižené;
• – для экранов телевизоров. tv - na televizních obrazovkách.

A to není všechno. , но они используются редко. Existují atributy několik dalších CSS Media Dotazy, ale jsou jen zřídka. all. Navíc neurčíte parametr - Výchozí na všechny.

Struktura dotazů médií

css. Namísto vytváření souborů stylu, můžete použít css kód. Vypadá to takhle:

(тут будут стили } @media obrazovky a (max-šířka: 1024px) {( existují styly}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Po @media směrnice, která jasně ukazuje, že média dotazu se používá, je údaj o typu zařízení (obrazovky - obrazovky) a další parametry. Max Width. V tomto příkladu, použijte vlastnost CSS Media Dotazy Max Width. px. To znamená, že se bude podílet styly uvedené v rovnátka, v případě, že uživatel velikosti obrazovky zařízení než 1024 px. и and не обязательны. Obrazovka a nikoli závazná. Můžete napsat toto:

@media (max-šířka: 1024px) {}

V takovém případě jsou vlastnosti, které mají být použity na jakémkoli zařízení, a to nejen těch, které jsou vybaveny televizí.

Zadání více parametrů

Předpokládejme, že chcete omezit rozsah několika přístrojů, které budou použity pro zvolení formátu. px, но не больше 500 px. Řekněme, že chcete zobrazit vlastnosti pouze ti, kteří navštíví vaše stránky z chytrého telefonu, velikost obrazovky není menší než 320 px, ale ne více než 500 px. V takovém případě se žádost podobu:

@media (min šířka: 320) a (maximální šířky: 500px) {}

and. Pokud jste obeznámeni s programováním, NJ víte, co operátor je aplikován a. Pro ty, kteří nevědí: zkontroluje, pokud jsou splněny obě podmínky. Vlastnosti E. Aktivace na obrazovce dotazu nesmí být menší než 320 a ne více než 500 pixelů.

and не ограничивается одним. A počet operátorů není omezen na jedno. Můžete dát je tolik, kolik chcete. Například pokusu o vytvoření určité velikosti obrazovky pro chytré telefony a zcela odlišná - pro televizory.

Důležitým bodem - orientace na uživatele zařízení. Někdo prohlížení webových stránek na váš smartphone v orientaci na výšku, někdo - s krajinou. orientation:portrait, для вторых, соответственно, orientation:landscape. V prvním případě budete potřebovat dodatečnou orientaci stav: portrét, na druhém, respektive orientace: krajina. @media. Tyto linky jsou také uvedeny v závorkách následujících @media týmu. and. Můžete je sdílet prostřednictvím a.

Další zajímavé nuance. and вы вполне можете использовать оператор or. Místo toho, a můžete také použít nebo operátor. On potřebuje alespoň jednu podmínku v žádosti, aby to byla pravda! Například:

) {} @media (max-šířka: 500px) nebo (orientace: portrét) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. V případě, že displej je menší než 500 px nebo použití orientace na výšku, bude šle trvat stylů efektů.

Klíčové slovo není pro účely jemného doladění

not. Média dotaz, můžete vložit slovo ne. To se provádí následujícím způsobem:

@media (ne max-šířka: 700 pixelů ) {}

Vlastnosti jsou aktivovány, pokud je maximální šířka není roven 700 pixelů.

funkce médií

Dotazy lze použít několik předem stanovených funkcí. W3C. Seznamte se s vše, co může on-line W3C. Většina kodéry dost vlastnit tři hlavní:

• (о нем мы уже говорили); Orientace (už jsme o tom mluvili);
• (ширина, ее тоже упоминали); Šířka (šířka, je také uvedeno);
• (высота). výšky (výška).

Výška je zřídka použitý, ale existuje několik případů, v nichž by mohlo toto nastavení být užitečné.

Jak a kam umístit žádostí?

Mnoho webové designéry nějak dát je do konce stylů souborů. Například nejprve uvádí hlavní styly, a pak v dolní části dokumentu, které žádosti.

To není moc dobré. Mnohem vhodnější umístit vlastnosti pro různá zařízení hned po hlavní styly. Například máte div, který stanovil červenou barvu písma:

div {

barva: červená;

}

Bezprostředně poté, co byla žádost naznačuje:

@media (min šířka: 320) {}

Předepisuje vlastnosti.

Takový přístup by byl těžkopádný, pokud používáte „čistého» CSS. Na pomoc preprocesoru. Mají spoustu zajímavých příležitostí pro zpřesnění aplikačních požadavků.

Další možností - umístění vlastnosti pro různá zařízení v různých souborech stylu. To je zvláště užitečné, pokud používáte direktivy preprocesoru dovážet. Výsledkem je snadno upravit, čistý kód.

Který z nich použít? To vše záleží na osobních preferencích a charakteristikách týmu. Možná, že v místě své práce má určitý způsob uvádění multimediálních dotazů budou přijaty.

Také nezapomeňte, že můžete zjednodušit svůj život s nejnovějším softwarem. Nejde jen o preprocesoru. S douškem skupiny CSS dotazy médií může tento proces mnohem jednodušší. Doporučuje se zvládnutí tohoto nástroje nebo některý z jeho analogů.