Medyazaprosы boli zavedené v špecifikácii CSS3 rozhodovaní o starú bolesť hlavy webových vývojárov: natívne kontrolný štýlov CSS, v závislosti na špecifikácii konkrétneho zariadenia a hladkú zmenu štýlu pri zmene veľkosti okna prehliadača.
Medyazaprosы CSS: adaptyv 5 minút
Zjednodušene povedané, medyazapros - štruktúru, ktorá umožňuje v závislosti na určitých podmienkach, vybrať, ktorý štýl použiť na stránke. Napríklad, ak je šírka okna prehliadača ako 1024px, ukážeme úplné ponuky rastyahyvayuscheesya celú šírku stránky, a ak je menej ako 1024px - skryť (napríklad pomocou displeja vlastnosť: none;) a ukázať miesto menu "hamburger", keď kliknete ktorý zobrazuje sofistikovaný zoznam (zobrazenie: blok;)
Tak je jednoduchý CSS média otázka je nasledovné: .menu {display: block;}
.burger ponuky {display: none;} @all médiá a (max-width: 1024px) {.menu {display: none;} .burger ponuky {display: block;}} možno čítať doslovne ako my vždy zobraziť a skryť štandardné menu "Menu hamburger", ale v prípade, že šírka prehliadače najmenej 1024 pixelov (max-šírky: 1024px znamená "maximálna šírka 1024px»), schováme staré menu a novú show. Vlastnosti mediálnych dopytov budú platné. To bude fungovať ako v úvodných stranách mobilného telefónu alebo tabletu s hladkým a klesajúcou okna prehliadača, keby sme ju premení okná vhopymosya na jednej strane a vytiahnite tým, že zníži jeho veľkosť.
Približne takáto požiadavka môže vyzeraťv editore:
Ak sa len stručný prehľad medyazaprosov v CSS, môžete bez obáv cvičiť a testovať ich vplyv na svojom vlastnom webe, ktorým je na CSS otázky médií. Mobilné zariadenia taktiež ľahko rozpoznajú vaše nové štýly, pokiaľ nezabudnete špecifikovať metaznačku v prehliadači, o ktorej budeme podrobnejšie diskutovať nižšie. Odporúčame vám, aby ste si prečítali viac o svojich vlastnostiach, dozvedeli sa viac o podpore prehliadačov, najskôr zvážili mobilné zariadenia a počítače.
Podpora medyazaprosov
Možno, že táto otázka má zásadný význam pre tých, ktorí sú vážne premýšľať o svojich návštevníkov a snaží sa, aby to tak prístupné všetkým. Našťastie medyazaprosы už dobre podporované a dobre pracujú v moderných prehliadačoch, počnúc najproblematickejšie Safari 4 a Internet Explorer 9. Ak je potrebné k udržaniu Internet Explorer 8, môžete sa pripojiť k populárnym skriptu alebo respond.js CSS3-mediaqueries.js ,
nastavte správny CSS nosiče pojazdný
Aby všetko fungovalo tak, ako má, je dôležité mať na pamäti, nastavenie dokumentu názov značky výrez. To sa vykonáva nasledujúcim spôsobom: Tak, na obrazovkách mobilných zariadení s vysokou hustotou pixelov bude nastavený správny vzťah medzi týmito oblasťami v CSS a skutočným počtom pixelov a vaše stránky budú byť zmenšený. A už neexistuje otázka, prečo médium nefunguje, keď sa zmenší CSS.
Fine adaptabilita
medyazaprosov hlavnou úlohou - aby adaptívne stránky, teda "učí" sa automaticky upraví, keďvšetky formáty a veľkosti obrazovky. Môžete to urobiť dvomi spôsobmi. Označte dopyty médií CSS s niektorými kľúčovými bodmi, ktoré najčastejšie odkazujú na populárne formáty zariadení. Napríklad najjednoduchšia možnosť je: 320px - telefóny, 768px - tablety, 1024px a vyššie - notebooky a osobné počítače. A na každom z týchto bodov meniť pevnú veľkosť blokov (rovnako ako všetky ostatné objekty, ako je video alebo obrázok). Druhou možnosťou je hladký, "gumový" prechod medzi niekoľkými bodmi, nastavenie prvkov stránky nie tuhých rozmerov v pixeloch, ale percentá. V tomto prípade napríklad v rozmedzí 1024 pixlov a viac panel s ponukami zaberie 50% stránky, hladko s veľkosťou okna prehliadača až 768 pixelov a potom - natiahne na všetkých 100% okna prehliadača.
Stojí za to spomenúť prvý a desktop pre mobilné zariadenia, ktoré sa odlišujú prístupom k budovaniu dopytov. V prvom prípade popíšeme pravidlá pre všetky zariadenia, vrátane notebookov, osobných počítačov, a potom postupne budovať stránky a odstrániť ďalšie prvky stránky. V druhej - najprv pripravíme rozloženie stránok pre mobilné zariadenia a potom pri rozširovaní okna prehliadača a vzhľade voľného miesta vložíme do nich obsah.
Trik od sprievodcu: bodové médium css - pravidlá v tagu odkaz!
Len málo ľudí vie, ale nemusia písať otázky priamo v štýloch CSS, môžete ich priamo zadať pri pripájaní súboru priamo do značky. Súbor bude pripojený v závislosti od toho, či stránka spĺňa kritériá uvedené v danom vlastníctvemedia. Pri importovaní štýlov z iných súborov pomocou @import môžete použiť rovnaký spôsob. Na záver treba poznamenať, že veľa populárnych knižníc používa pri vývoji webových stránok, ktoré obsahujú vstavané analógové mediálne dopyty. Nemali by sa ignorovať. Napríklad Bootstrap vám umožňuje predplatiť triedy tried HTML, vďaka ktorým sa bloky automaticky prispôsobia pri zmene veľkosti obrazovky, ale nebudete môcť flexibilne ovládať tento proces a miesto bude vždy pevne rozdelené do 12 stĺpcov. Koniec koncov, len s ich pomocou môžete vytvoriť stránky, ktoré budú čo najpružnejšie, aby sa mohli prispôsobiť ľubovoľným zariadeniam, zatiaľ čo sú úplne pod vašou kontrolou.
