Jak vložit žádosti o média? CSS - adaptabilita ve třech krocích

Zprávy médií byly představeny ve specifikaci CSS3 a řešily starou bolest všech vývojářů webu: přirozené řízení stylů CSS v závislosti na technických vlastnostech daného zařízení a plynulá změna stylu při změně velikosti okna prohlížeče.

Zprávy médií v CSS: 5 minut adaptivní

Jednoduše řečeno, média dotaz - to design, který umožňuje, za určitých podmínek, aby si vybrat, který styl použít na stránce. Například, pokud je šířka okna prohlížeče přes 1024px, ukážeme kompletní menu, natáhnout přes 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“, po kliknutí na kterém je zobrazen elegantní seznam (zobrazení: blok)

Takže nejjednodušší dotaz CSS pro média bude vypadat takto:

.nabídka {display: block-}
.burger-menu { displej: žádný; }}

@media all a (max-width: 1024px) {

.menu { displej: žádný; }}
.burger-menu {zobrazení: blok-}

}}

Doslova si můžete přečíst toto: vždy ukazují standardní nabídky a skrýt „Menu hamburger“, ale pokud je okno prohlížeče menší než 1024 pixelů (max-width: 1024px znamená „až do maximální šířku 1024px“), pak jsme se schovat staré menu a představení nové. Vlastnosti v dotazu na média budou přepsány existujícími. To bude fungovat jako při otevření stránky z mobilního telefonu nebo tabletu, a s postupným poklesem v okně prohlížeče, když odbočíme ho do krabice a uchopil jednu ze stran a přitahovat tím, že sníží jeho velikost.

Přibližně tak můžete žádost vypadat ve vašem editoru:

Máte-li dostatek krátkého přehledu mediálních dotazů v CSS, můžete snadno provést a zkontrolovat jejich činnost na vašem webu instalací na něj Dotazy médií CSS. Mobilní zařízení také snadno rozpoznávají vaše nové styly, pokud nezapomenete zadat výřez meta tagů, o kterém budeme podrobněji diskutovat. Nicméně doporučujeme, abyste se dozvěděli více o svých vlastnostech, dozvěděli se o podpoře prohlížeče, zvážili nejdříve mobilní zařízení a pracovní plochu.

Podpora pro mediální dotazy

Možná, že to je klíčovou otázkou pro ty, kteří vážně uvažují o návštěvnících vašeho webu a snaží se dělat to co nejdostupnější pro každého. Naštěstí mediální dotazy byly udržovány velmi dobře a spolehlivě pracovat v moderních prohlížečích, počínaje nejproblematičtější Safari 4 a Internet Explorer 9. Pokud je to skutečně potřeba podporovat Internet Explorer 8, můžete se připojit k oblíbené stránky nebo skript respond.js CSS3-media queries. js.

Instalace správného média CSS pro mobilní zařízení

K tomu, aby vše do práce tak, jak má, je důležité nezapomenout na instalaci titulu značka výřezu dokumentu. To se děje takto:

Na obrazovkách mobilních zařízení s vysokou hustotou pixelů bude tedy nastaven správný poměr mezi zadaným v CSS a skutečným počtem pixelů a vaše stránky budou změněny. A už neexistuje otázka, proč média nepracují s hromadou CSS.

Elegantní přizpůsobivost

Hlavním úkolem mediálních dotazů je přizpůsobit stránky, tj. "Učit" je automaticky přizpůsobit se jakýmkoli formám a velikostem obrazovky. To lze provést dvěma způsoby.

Určení požadavků na média CSS jako určitých klíčových bodů, které nejčastěji odkazují na populární formáty zařízení. Například nejjednodušší verze: 320px - telefony, 768px - tablety, 1024px a vyšší - notebooky a osobní počítače. A na každém z těchto bodů změňte fixní velikosti bloků (stejně jako všechny ostatní objekty, například video nebo obrázky).

Druhou cestou je hladký, "gumový" přechod mezi několika body, přičemž specifikace prvků stránky nejsou tuhé rozměry v pixelech, ale v procentech. V tomto případě například v rozmezí 1024 pixelů a více bude blok menu obsazovat 50% stránky, hladce se zmenšuje spolu s velikostí okna prohlížeče na 768 pixelů a poté - roztažením na 100% výřezu.

Za zmínku stojí především první a desktopová mobilní zařízení, která se liší v přístupu k budování dotazů. V prvním případě nejprve popíšeme pravidla pro všechna zařízení, včetně notebooků a osobních počítačů, a pak postupně obnovíme stránky a odstraníme další prvky stránky. Ve druhé - nejprve připravíme rozvržení stránky pro mobilní zařízení, pak při rozšiřování okna prohlížeče a vzhledu volného místa umístíme do nich zbývající obsah.

Trik velitele: uveďte css - pravidla v tagu odkaz!

Málokdo ví, ale není nutné psát dotazy přímo ve stylech CSS, můžete je přímo zadat, když připojujete soubor přímo do tagu . bude připojen soubor, v závislosti na tom, zda stránka splňuje kritéria stanovená ve vlastnictví sdělovacích prostředků. Podobným způsobem můžete použít i při importu stylů z jiných souborů pomocí @import.

Závěrem je třeba poznamenat, že mnoho populárních knihoven používaných při vývoji webových stránek obsahuje embedded analogy mediálních dotazů. Neměli byste je zanedbávat. Například Bootstrap vám umožňuje psát třídy v kódu HTML, který bude automaticky přizpůsobovat bloky při změně velikosti obrazovky, ale tento proces nemůžete pružně řídit a stránky budou vždy pevně rozděleny do 12 sloupců. Koneckonců, pouze s jejich pomocí můžete vytvořit stránky, které budou co nejpružnější, aby se přizpůsobily jakýmkoli zařízením a zároveň byly zcela pod vaší kontrolou.