CSS Media Queries: popis krok za krokem, funkce a recenze

Najednou ti, kteří navštívili webové stránky z smartphonů a podobných mobilních zařízení, způsobili jen smích. Mnoho prostě nechápalo, proč je to nutné, protože existují takové pohodlné stacionární počítače! Nebo v nejhorším případě notebooky. Navíc byl mobilní internet nákladný.

Čas uběhl. Internet byl levný. Na trhu vyšlo více telefonů a tablet. O něco později si majitelé populárních webových stránek zmátli škrábnutou hlavu. Podle statistik se ukázalo, že jejich zdroje jsou častěji navštěvovány ze smartphonů než ze stacionárních počítačů!

V těchto dnech nebyly weby optimalizovány pro prohlížení z mobilních zařízení. Při přechodu na starý zdroj z telefonu byste museli být spokojeni s malými písmeny, malými položkami nabídky a nepohodlnými tlačítky.

Vzhled CSS Media Queries

Bylo třeba vynaložit prostředky, aby vypadaly dobře při pohledu z jakékoli obrazovky. Za prvé se rozšířila praxe vytváření samostatných stránek pro každou velikost. Například návštěvník, který použil mobilní telefon, získal jeden zdroj a ten, který "seděl" z počítače - na druhé straně. Ale bylo to dlouhé, drahé a nepohodlné.

Potom přišly CSS3 Media Queries. S jejich pomocí, jednoduchou příležitostí realizovat dynamický design.

Co je to dynamický design?

Tento termín se používá, pokud se vzhled zdroje změní podle velikosti obrazovky, na které se zobrazuje. Jak to pochopit? Je to jednoduché.

Představte si, že máte webové stránky. V horní části je navigační nabídka. Horizontální. Rozkládá celou šířku stránky. Pod ním je blok s kontaktními informacemi. Telefon a adresa jsou také rozloženy na dva bloky a jsou uspořádány vodorovně vedle sebe. Pod tímto blokem je hlavní obsah a postranní panel se nachází vlevo nebo vpravo. Níže, jako obvykle, zápatí.

Toto je "klasické" uspořádání komponent. Je skvělý pro osobní počítač, ale není příliš vhodný pro mobilní telefony. Horizontální nabídka je příliš široká. Kontakty jsou daleko od sebe. Chcete-li použít informace z postranního panelu a musíte procházet obrazovku a to není všechno, co má ráda.

Problém lze vyřešit pomocí adaptivního a mobilního návrhu s dotazy CSS3 Media Queries. Pomocí dotazy médií znovu sestavujeme obsah stránky illip - nyní vše funguje takto:

• nad - blok s vertikálním navigačním menu -
• pod ním - blok s kontakty, který je nyní také umístěn vertikálně-
• Obsah postranního panelu není zobrazen na straně obsahu značky
  , ale přemýšlejte ho.

Jedná se o jednoduchý příklad toho, co lze udělat s odpověďmi na média reagující na web design. Ve skutečnosti jsou možnosti mnohem větší.

Takže co je MediaQuestion?

Pod pojmem CSS Media Queries pochopte modul CSS3, pomocí něhož můžete upravit obsah stránky na určité podmínky. Například začne reagovat na velikost obrazovky nebo na orientaci zařízení (na výšku / na šířku).

Jak systém pochopí, že potřebujete změnit obsah? K tomu jsou použity dotazy médií. Určují určité parametry. Pokud zařízení, ze kterého návštěvník přišel na stránky, odpovídá těmto parametrům, jsou zahrnuty předběžně registrované styly. Mohou být napsány jak ve všeobecné tabulce CSS, tak v samostatném souboru.

CSS Media dotazuje kompatibilitu s prohlížeči

Všechny moderní prohlížeče tuto techniku ​​podporují Safari až do Chrome. Samozřejmě, uživatelé starších verzí Internet Explorer budou problémy problémy - ale připusťme upřímně - ty, kteří stále používají starou IE, doslova cokoli může způsobit problémy.

Mediální dotazy Syntaxe přizpůsobivého rozvržení

Pravděpodobně jste se setkali s mediálními dotazy, když jste připojili styl stylu html. Pamatujte na tento řádek? Někdy byl do konce přidán další parametr, který vypadal takto: media = rsquo-screenrsquo.

To je poptávka po médiích! Znamená to, že specifikovaný soubor stylů bude fungovat na zařízeních vybavených obrazovkou. Místo toho obrazovce můžete zadat tisknout - V tomto případě jsou styly ze souboru aplikovány, pokud je stránka vytištěna.

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

• všechno - univerzální volba, používá se ticho, používá se ve všech případech -
• scrteen - obrazovky (počítače, notebooky, tablety, smartphony a vše, co je vybaveno displejem) -
• tisk - tiskárny-
• projekce - projektory -
• řeči - prohlížeče řeči -
• braille - u zařízení pro zrakově postižené -
• tv - pro televizní obrazovky.

To není vše. Existuje několik dalších atributů CSS Media Queries, ale jsou zřídka používány. Kromě toho nemůžete určit parametr vůbec - ve výchozím nastavení se zapne všechno.

Struktura žádosti o média

Namísto vytvoření souboru stylů můžete použít kód css. Vypadá to takto:

@media obrazovka a (max-width: 1024px) {(tam budou styly}}

Po směrnici @media, z čehož vyplývá, že bude použito dotazování pro média, je zde uvedeno typ zařízení (obrazovce - obrazovka) a další parametry. V tomto příkladu je použita vlastnost CSS Media Queries Maximální šířka. To znamená, že styly specifikované v křivkách budou použity, pokud velikost obrazovky uživatele nepřesáhne 1024px. Obrazovka a a nejsou vyžadovány. Můžete psát takto:

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

V tomto případě se vlastnosti budou používat na jakýchkoli zařízeních, nikoliv pouze na těch, která jsou vybavena obrazovkou.

Určení více parametrů

Předpokládejme, že chcete omezit rozsah zařízení, na kterých budou vybrané styly aplikovány. Chcete například zobrazovat vlastnosti pouze těm, kteří navštíví váš web ze smartphonu s velikostí obrazovky alespoň 320px, ale ne více než 500px. V tomto případě má dotaz následující formulář:

@media (min-šířka: 320px) a (max-šířka: 500px) {}

Pokud jste obeznámeni s programováním, víte, proč je operátor používán a. Pro ty, kteří neví: zkontroluje, zda jsou obě podmínky pravdivé. To znamená, že pro aktivaci vlastností v dotazu musí být obrazovka alespoň 320 a ne více než 500 pixelů.

Počet provozovatelů a neomezeno na jednu. Můžete je dát přesně tak, jak chcete. Pokuste se například vytvořit určité velikosti pro obrazovky smartphonů a zcela odlišné pro televizory.

Důležitým bodem je orientace uživatelského zařízení. Někdo prochází webovými stránkami ze smartphonu orientovaného na portrét, někdo - s krajinou. Pro první potřebujeme další podmínku orientace: portrét, pro druhé, resp. orientace: krajina. Tyto řádky jsou také uvedeny v závorkách za příkazem @media. Můžete je oddělit pomocí a.

Další zajímavé nuance. Místo toho a můžete použít operátora nebo. Chce, aby jedna podmínka v požadavku byla pravdivá! Například:

@media (max. šířka: 500px) nebo (orientace: na výšku). {}

Pokud je obrazovka menší než 500px NEBO použijte orientaci na výšku, začnou fungovat styly v křivkách.

Klíčové slovo není pro jemnější doladění

Do dotazu na médium můžete vložit slovo ne. To se děje takto:

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

Vlastnosti se aktivují, pokud maximální šířka není 700 pixelů.

Funkce médií

V dotazech lze použít několik předdefinovaných funkcí. Všechny je můžete vidět na webu W3C. Pro většinu jezdců stačí zvládnout tři hlavní:

• orientace (již jsme o tom mluvili) -
• šířka (šířka, bylo také zmíněno) -
• výška (výška).

Výška je zřídka využívána, ale existuje několik případů, kdy se toto nastavení může hodit.

Jak a kde zadat žádosti?

Mnoho rozložení z nějakého důvodu je postavilo na samém konci štýlu stylů. Například nejprve jsou uvedeny hlavní styly a v dolní části dokumentu se objevují dotazy.

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

div {

barva: červená-

}}

Ihned po zadání dotazu:

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

Předepište vlastnosti.

Tento přístup bude těžkopádný, pokud používáte "čisté" css. Preprocesory přijdou k záchraně. Mají spoustu zajímavých příležitostí pro přesnější uplatnění požadavků.

Další možností je umístit vlastnosti různých zařízení do různých souborů stylů. To je obzvláště užitečné, pokud používáte direktivu importu pro preprocesory. Výsledkem je čistý čistý kód.

Která možnost použít? Vše závisí na osobních preferencích a zvláštnostech práce týmu. Možná, v místě vaší práce, bude přijata určitá metoda umístění médií.

Nezapomeňte, že můžete pomocí svého nejnovějšího softwaru zjednodušit svůj život. Není to jen o preprocesorech. S pomocí Gulp Group CSS Media Queries můžete proces mnohem pohodlnější. Doporučujeme zvládnout tento nástroj nebo některé jeho analogy.