Medyazaprosы byly zavedeny ve specifikaci CSS3 rozhodování o starou bolest hlavy webových vývojářů: nativní kontrolní stylů CSS, v závislosti na specifikaci konkrétního zařízení a hladkou změnu stylu při změně velikosti okna prohlížeče.

Medyazaprosы CSS: adaptyv 5 minut

Zjednodušeně řečeno, medyazapros - strukturu, která umožňuje v závislosti na určitých podmínkách, vybrat, který styl použít na stránce. Například, pokud je šířka okna prohlížeče než 1024px, ukážeme úplné nabídky rastyahyvayuscheesya celou šířku stránky, a je-li méně než 1024px - skrýt (například pomocí displeje vlastnost: none;) a ukázat místo menu „hamburger“, když kliknete


Takže nejjednodušší požadavek na mediální CSS by vypadal takto: .menu {display: block;}
.burger nabídky {display: none;} @all média a (max-width: 1024px) {.menu {display: none;}
.burger nabídky {display: block;}} lze číst doslovně jako my vždy zobrazit a skrýt standardní menu „Menu hamburger“, ale v případě, že šířka prohlížeče nejméně 1024 pixelů (max-šířky: 1024px znamená „maximální šířka 1024px»), schováme staré menu a novou show. Vlastnosti mediálních dotazů budou platné. To bude fungovat jak v úvodních stranách mobilního telefonu nebo tabletu s hladkým a klesající okna prohlížeče, kdybychom ji promění okna vhopymosya na jedné straně a vytáhněte tím, že sníží jeho velikost.


Přibližně takový požadavek může vypadatv editoru: Pokud máte krátký přehled o mediálních dotazy v CSS, můžete si bezpečně procvičovat a otestovat jejich výkon na svých vlastních stránkách instalací dotazy médií CSS. Mobilní zařízení také snadno rozpoznají vaše nové styly, pokud nezapomenete zadat metaznačku výřezu, kterou budeme podrobněji diskutovat níže. Nicméně doporučujeme, abyste si přečetli další informace o svých vlastnostech, dozvěděli se o podpoře prohlížeče, zvážili nejprve mobilní telefony a stolní počítače.

Podpora mediálních dotazů

Možná je tato otázka klíčová pro ty, kteří vážně přemýšlejí o návštěvnících svých stránek a snaží se je zpřístupnit všem. Naštěstí medyazaprosы již dobře podporovány a dobře pracují v moderních prohlížečích, počínaje nejproblematičtější Safari 4 a Internet Explorer 9. Pokud jsou nutné k udržení Internet Explorer 8, můžete se připojit k populárním skriptu nebo respond.js CSS3-mediaqueries.js .

nastavte správný CSS nosiče pojízdný

Aby vše fungovalo tak, jak má, je důležité mít na paměti, nastavení dokumentu název značky výřez. To se děje takto: Na mobilních zařízeních s vysokou hustotou pixelů bude nastaven správný vztah mezi zadaným CSS a skutečným počtem pixelů a vaše stránky budou změněny. A už není otázka, proč média nefungují, když je CSS zvětšen.

Jemná přizpůsobivost

Hlavním úkolem mediálních dotazů je přizpůsobit místo, tj. "Učit", aby se automaticky přizpůsobovalovšechny formáty a velikosti obrazovky. Můžete to udělat dvěma způsoby. Označte dotazy CSS médií s některými klíčovými body, které nejčastěji odkazují na populární formáty zařízení. Například nejjednodušší možnost je: 320px - telefony, 768px - tablety, 1024px a vyšší - notebooky a osobní počítače. A na každém z těchto bodů změnit pevnou velikost bloků (stejně jako všechny ostatní objekty, jako je video nebo obrázek). Druhou cestou je vytvořit hladký, "gumový" přechod mezi několika body, nastavením prvků stránky, které nejsou tuhé rozměry v pixelech, ale procenta. V tomto případě například v rozmezí 1024 pixelů a více bude panel menu zabírat 50% stránky, plynule s rozsahem okna prohlížeče až 768 pixelů a poté - roztažením do všech 100% okna prohlížeče. Také stojí za zmínku nejprve mobilní první a desktop první, lišící se v přístupu k budování dotazů. V prvním případě nejdříve popíšeme pravidla pro všechna zařízení, včetně notebooků, osobních počítačů, a pak postupně budeme vytvářet stránky a odstraňovat další prvky stránky. Ve druhé - nejprve připravíme rozvržení stránky pro mobilní zařízení a poté, co rozšiřujeme okno prohlížeče a vzhled volného místa, vkládáme do nich obsah.

Trik od průvodce: bodové médium css - pravidla v tagu odkaz!

Málokdo ví, ale nemusí přímo psát dotazy přímo ve stylech CSS, můžete je přímo zadat při připojení souboru přímo do tagu. Soubor bude připojen v závislosti na tom, zda stránka splňuje kritéria uvedená ve vlastnictvímédií Při importu stylů z jiných souborů pomocí @import můžete použít stejný způsob. Závěrem je třeba poznamenat, že mnoho populárních knihoven se používá při vývoji webů, které obsahují vestavěné analogy mediálních dotazů. Neměly by být ignorovány. Například Bootstrap umožňuje předplatit třídy tříd HTML, díky kterým se bloky automaticky přizpůsobí při změně velikosti obrazovky, ale nebudete moci tento proces flexibilně řídit a stránky budou vždy pevně rozděleny do 12 sloupců. Koneckonců, jen s jejich pomocí můžete vytvořit stránky, které budou co nejvíce flexibilní, aby se přizpůsobily jakýmkoli zařízením a zároveň byly zcela pod vaší kontrolou.