Syntaxe pro dotazy médií s minimální šířkou a max. Šířkou
Odpovědný návrh webových stránek je přístup k vytváření webových stránek, kde tyto stránky mohou dynamicky měnit jejich uspořádání a vzhled na základě velikosti obrazovky návštěvníka . Velké obrazovky mohou získat rozložení vhodné pro tyto větší displeje, zatímco menší zařízení, jako jsou mobilní telefony, mohou přijímat stejný web formátovaný způsobem, který je vhodný pro tuto menší obrazovku. Tento přístup poskytuje lepší uživatelský dojem pro všechny uživatele a může dokonce pomoci zlepšit hodnocení vyhledávačů . Důležitou součástí citlivého návrhu webových stránek je CSS Media Queries.
Mediální dotazy jsou jako malé kontextové prohlášení uvnitř souboru CSS vašeho webu a umožňují vám nastavit některá pravidla CSS, která se projeví až po splnění určité podmínky - například když je velikost obrazovky nad nebo pod určitými prahovými hodnotami.
Media Queries in Action
Tak jak používáte dotazy médií na webových stránkách? Zde je velmi jednoduchý příklad:
- Začínáte s dobře strukturovaným dokumentem HTML bez jakýchkoliv vizuálních stylů (to je to, o čem je CSS)
- Ve vašem souboru CSS byste začali tak, jak to normálně děláte tím, že budete stylovat stránku a nastavíte základnu, jak vypadá web. Řekněme, že chcete, aby velikost písma stránky byla 16 pixelů, můžete napsat tuto CSS: body {font-size: 16px; }}
- Nyní můžete zvýšit velikost písma pro větší obrazovky, které mají dostatek nemovitostí k tomu. Toto je místo, kde se dotýkají Media Queries. Můžete spustit mediální dotaz, jako je tato: @media screen a (min-width: 1000px) {}
- Toto je syntaxe Media Query. Začíná to s aplikací @media, která sama vytvoří Media Query. Dále nastavíte "typ média", což je v tomto případě "obrazovka". Platí to pro obrazovky stolního počítače, tablety, telefony atd. Konečně ukončíte mediální dotaz pomocí funkce "media". V našem příkladu výše je "střední šířka: 1000 pixelů". Znamená to, že Media Query bude fungovat pro displeje s šířkou minimálně 1000 pixelů.
- Po těchto prvcích mediálního dotazu přidáte otevírací a zavírací kudrnatý vzorek podobný tomu, co byste dělali v jakémkoli normálním pravidle CSS.
- Posledním krokem k mediálnímu dotazu je přidat pravidla CSS, které chcete použít, jakmile bude tato podmínka splněna. Přidáváte tato pravidla CSS mezi kudrnaté závorky, které tvoří Media Query, například: @media screen a (min-width: 1000px) {body {font-size: 20px; }}
- Když jsou splněny podmínky mediálního dotazu (okno prohlížeče má šířku alespoň 1000 pixelů), tento styl CSS se projeví změnou velikosti písma našeho webu z 16 pixelů, které jsme původně stanovili na novou hodnotu 20 pixelů.
Přidání více stylů
Bylo by možné umístit co nejvíce pravidel CSS v rámci tohoto Media Query tak, aby bylo možné upravovat vizuální vzhled vašeho webu. Například pokud chcete nejen zvýšit velikost písma na 20 pixelů, ale také změnit barvu všech odstavců na černou (# 000000), můžete přidat toto:
@media obrazovka a (min-šířka: 1000px) {body {font-size: 20px; } p {barva: # 000000; }}Přidání více dotazy médií
Navíc můžete přidat další dotazy na média pro každou větší velikost a přidat je do svého stylu jako:
@media obrazovka a (min-šířka: 1000px) {body {font-size: 20px; } p {barva: # 000000; {} @media obrazovka a (min-šířka: 1400px) {body {font-size: 24px; }}První Media Queries by kopírovaly v šířce 1000 pixelů, změnou velikosti písma na 20 pixelů. Poté, jakmile byl prohlížeč nad 1400 pixelů, velikost písma se opět změnila na 24 pixelů. Můžete přidávat co nejvíce mediálních dotazy podle potřeby pro konkrétní web.
Minimální šířka a maximální šířka
Obecně jsou dva způsoby zápisu dotazy médií - pomocí "min-width" nebo "max-width". Zatím jsme v akci viděli "min-width". To způsobí, že se dotazy médií projeví až poté, co prohlížeč dosáhne alespoň této minimální šířky. Takže dotaz, který používá "min-width: 1000px", se použije, když je prohlížeč šířený nejméně 1000 pixelů. Tento styl mediálního dotazu se používá při vytváření webu způsobem "mobilní první".
Pokud používáte "max-width", funguje to opačně. Po stisku prohlížeče pod tuto velikost by se vztahoval dotaz "max-width: 1000px".
Pokud jde o starší prohlížeče
Jednou z problémů s aplikací Media Queries je nedostatečná podpora ve starších verzích aplikace Internet Explorer. Naštěstí existují dostupné polyfily, které mohou podporovat podporu médií v těchto starších prohlížečích a umožňují je používat dnes na webových stránkách a současně zajišťují, že zobrazování těchto stránek nevypadá v starším prohlížečovém softwaru.
Editoval Jeremy Girard dne 1/24/17