Niekedy tí, ktorí navštívili webové stránky zo smartphonov a podobných mobilných zariadení, spôsobili len smiech medzi ostatnými. Mnohí jednoducho nevedeli pochopiť, prečo je to potrebné, pretože tam sú také pohodlné stacionárne počítače! Alebo v najhoršom prípade notebooky. Okrem toho bol mobilný internet drahý. Čas prešiel. Internet je lacnejší. Stále viac telefónov a tabuliek bolo predaných. Po nejakej dobe majitelia populárnych stránok boli zmätení škriabaním hlavy. Podľa štatistík sa ukázalo, že ich zdroje sú častejšie navštevované z inteligentných telefónov ako zo stacionárnych počítačov!

V tom čase neboli stránky optimalizované na prehliadanie mobilných zariadení. Keď ste prišli k starému zdroju z telefónu, museli by ste byť spokojní s malými písmenami, malými položkami menu a nepríjemnými tlačidlami.

Vznik CSS Media Queries

Bolo potrebné vytvoriť zdroje, aby vyzerali dobre pri pohľade z ktorejkoľvek obrazovky. Pôvodné šírenie praxe vytvárania samostatných stránok pre každú veľkosť. Napríklad návštevník, ktorý používal mobilný telefón, spadol do jedného zdroja a ten, ktorý "sedel" z jedného počítača na druhý. Ale to bolo dlhé, drahé a nepohodlné. Potom vznikli CSS3 Media Queries. S ich pomocou, jednoduchá príležitosť realizovať dynamický dizajn.

Čo je to dynamický dizajn?

Tento pojem sa používa, ak sa vzhľad zdroja mení v závislosti od veľkosti obrazovky, na ktorej sa zobrazuje. TaktoRozumiete? Všetko je jednoduché. Predstavte si, že máte webové stránky. Navigačné menu je na vrchu. Vo vodorovnej polohe. Rozširuje sa na celú šírku stránky. Nižšie je uvedený blok s kontaktnými informáciami. Telefón a adresa sú tiež oddelené dvomi blokmi a sú umiestnené horizontálne, tesne vedľa seba. Pod týmto blokom je hlavný obsah a bočný panel sa nachádza vľavo alebo vpravo. Nižšie, ako obvykle, obuv.


Toto je "klasické" usporiadanie komponentov. Je to skvelé pre osobné počítače, ale nie pre mobilné telefóny. Horizontálne menu je príliš široké. Kontakty sú ďaleko od seba. Ak chcete použiť informácie z bočného panela a vôbec máte obrazovku posúvania a nie všetci ju majú rád. Problém je možné vyriešiť pomocou adaptívneho a mobilného dizajnu pomocou mediálnych dopytov CSS3. Pomocou frontu médií rekonštruujeme obsahovú lokalitu. Teraz všetko funguje takto:

v hornej časti - blok s vertikálnym navigačným menu;

pod ním - blok s kontaktmi, ktoré sú teraz tiež vertikálne umiestnené;

obsah bočného panela nie je zobrazený zo strany obsahu značky a NAD je.

Toto je najjednoduchší príklad toho, čo môžete urobiť s odpovedajúcimi webovými dizajnmi. V skutočnosti sú príležitosti oveľa viac.

Aké sú teda mediálne otázky?

Pod termínom CSS Media Queries sa modul CSS3 používa na prispôsobenie obsahu stránky určitým podmienkam. Napríklad začne reagovať na veľkosť obrazovky alebo orientáciu zariadenia(kniha /krajina). Ako systém pochopí, čo je potrebné na zmenu obsahu? Ak to chcete urobiť, použite mediálne dopyty. Určujú určité parametre. Ak zariadenie, z ktorého návštevník vstúpil na stránku, spĺňa tieto parametre, obsahuje predpísané štýly. Môžu byť napísané vo všeobecnej tabuľke CSS aj v samostatnom súbore.

Kompatibilita s dotazy médií CSS s prehliadačmi

Všetky moderné prehliadače túto techniku ​​podporujú, od Safari až po Chrome. Samozrejme, používatelia starších verzií programu Internet Explorer budú mať problémy, ale buďte úprimní - pre tých, ktorí stále používajú starú IE, doslova všetko môže spôsobiť problémy.

Syntax prispôsobiteľného rozloženia pre dopyty médií

Pri pripojení štýlu šablón k html ste možno narazili na mediálne dopyty. Pamätajte na tento riadok? Niekedy bola do konca pridaná ďalšia možnosť, ktorá vyzerala takto: media = 'screen'. Toto je mediálny hovor! Znamená to, že špecifikovaný štýl bude fungovať na zariadeniach vybavených obrazovkou. Namiesto obrazovky môžete určiť tlač - v ktorom prípade sa štýly súborov použijú, ak sa stránka vytlačí. Môžete použiť nasledujúce atribúty:

all - predvolená vo všetkých prípadoch;

obrazovky (počítače, prenosné počítače, tablety, smartfóny a všetko, čo je vybavené displejom);

tlač - tlačiarne;

projekčné projektory;

prehliadače reči jazyka;

braille - pre zariadeniapre zrakovo postihnutých;

tv - pre televízne obrazovky.

Toto nie je všetko. Existuje niekoľko ďalších atribútov CSS Media Queries, ale zriedka sa používajú. Navyše nemôžete zadať predvolenú možnosť zapnúť všetky.

Štruktúra žiadosti o médium

Namiesto vytvorenia šablónového štýlu môžete použiť kód css. Vyzerá to takto: @media obrazovky a (max-width: 1024px) {(tam bude style} Po smernice @media, čo jasne ukazuje, že bude použitý medyazapros, je údaj o type zariadenia (obrazovky - obrazovky) a ďalšie parametre V tom. . príklad vlastnosť používa CSS Media Otázky Max Width To znamená, že tieto štýly v zložených zátvorkách bude použitá v prípade, že veľkosť obrazovky používateľa zariadenia, px obrazovky viac ako 1024 aa sú voliteľné môžete písať toto :.
. @media (max-width: 1024px) {} V tomto prípade budú použité vlastnosti

Definujte viacero parametrov

Predpokladajme, že chcete obmedziť rozsah zariadení, ktoré sa použijú vo štýle. Povedzme, že chcete zobrazovať vlastnosti iba tým, ktoré sú ktorý navštívi vaše stránky zo smartphonu, ktorého veľkosť obrazovky nie je menšia než 320 px, ale nie väčšia ako 500 px. V tomto prípade sa požiadavka má túto podobu: @media (min-width: 320) a (max-width: 500px) {} Ak ste oboznámení s programovaním, nj vedieť, čo sa týka obsluhy a. Pre tých, ktorí nevedia, skontroluje, či sú tieto dve podmienky pravdivé. To aktivuje vlastnostiobrazovka požiadavky musí byť aspoň 320 a nie viac ako 500 pixelov. Počet prevádzkovateľov a nie je obmedzený na jeden. Môžete ich dať presne tak, ako chcete. Skúste napríklad vytvoriť určité veľkosti pre obrazovky smartphonov a úplne iné - pre televízory. Dôležitým bodom je orientácia používateľského zariadenia. Niekto prechádza stránky zo smartphonu s orientáciou na výšku, niekto s krajinou. Najprv budete potrebovať ďalšiu orientáciu podmienok: portrét, pre ostatné, orientáciu: krajinu. Tieto riadky sú tiež uvedené v zátvorkách po príkaze @media. Môžete rozdeliť pomocou a. Ďalším zaujímavým odtieňom. Namiesto toho môžete používať operátora alebo. Potrebuje, aby aspoň jedna podmienka v žiadosti bola pravdivá! Napríklad: @media (max-width: 500px) alebo (Orientácia: na výšku) {} Ak je displej menší než 500 px Má portrétu, štýlu traky prejavili.

kľúčové slovo nie je pre jemnejšie nastavenie

V dotaze o médiách môžete vložiť slovo nie. To sa vykonáva: @media (ne max-šírka: 700 pixelov) {} Vlastnosti sú aktivované, ak je maximálna šírka 700 pixelov, je nerovná.

Funkcie médií

V dotazoch je možné použiť niekoľko preddefinovaných funkcií. Pozrite sa na vás vo W3C. Väčšina plánovačov má dosť na to, aby mala tri hlavné

orientáciu (už sme o tom hovorili);

šírka (šírka, tiež uvedená);

výška (výška).

Výška je zriedka používaná, ale existuje niekoľkoprípady, v ktorých môže byť toto nastavenie užitočné.

Ako a kde umiestniť dopyty?

Veľa prehľadávačov z nejakého dôvodu ich umiestni na samom konci štýlu šablón. Napríklad hlavné štýly sú uvedené prvýkrát a v spodnej časti dokumentu sa nachádzajú dopyty. To nie je príliš dobré. Je to oveľa pohodlnejšie umiestniť vlastnosti pre rôzne zariadenia hneď po hlavných štýloch. Napríklad máte div, ktorý má červenú farbu písma: div {farba: červená; } Ihneď po zadaní dotazu: @media (min-width: 320px) {} Napíšeme vlastnosti. Takýto prístup by bol ťažkopádny, ak by sa používal "čistý" css. Preprocesory prídu na záchranu. Majú veľa zaujímavých funkcií pre dôležitejšie aplikácie. Ďalšou možnosťou je umiestňovanie vlastností pre rôzne zariadenia v rôznych súboroch štýlov. To je obzvlášť užitočné, ak používate smernicu o importovaní preprocesora. Výsledkom je pohodlné úpravy a čistenie kódu. Ktorú možnosť používať? Všetko závisí od osobných preferencií a funkcií tímu. Možno, v mieste vašej práce, bude prijatý určitý spôsob umiestnenia mediálnych dopytov. Tiež nezabudnite, že môžete uľahčiť život s najnovším softvérom. Nie je to len o preprocesoroch. Prostredníctvom dotazov médií Gulp Group CSS Media môžete tento proces urobiť oveľa pohodlnejšie. Odporúčame zvládnuť tento nástroj alebo akýkoľvek jeho analóg.