Jak používat dotazy médií v HTML a CSS k vytváření responzivních webů

Pokud chcete vyvíjet webové stránky / webové aplikace, je pro váš úspěch nezbytné vědět, jak vytvářet responzivní návrhy.

V minulosti bylo vytváření webů, které se dobře přizpůsobily různým velikostem obrazovek, luxusem, který si vlastníci webových stránek museli vyžádat od vývojáře. Nárůst používání smartphonů a tabletů však nyní ve světě vývoje softwaru učinil z responzivního designu nutnost.

Používání mediálních dotazů je nejlepší způsob, jak zajistit, aby se váš web / webová aplikace na každém zařízení zobrazovala přesně tak, jak chcete.

Porozumění responzivnímu designu

Stručně řečeno, responzivní design se zabývá použitím HTML / CSS k vytvoření rozložení webu / webové aplikace, které se přizpůsobuje různým velikostem obrazovky. V HTML / CSS existuje několik různých způsobů, jak dosáhnout odezvy v designu webových stránek:

• Použití jednotek rem a em místo pixelů (px)
• Nastavení výřezu / měřítka každé webové stránky
• Používání mediálních dotazů

Mediální dotaz je funkce CSS, která byla vydána ve verzi CSS3. Se zavedením této nové funkce získávají uživatelé CSS možnost upravit zobrazení webové stránky na základě výšky, šířky a orientace zařízení / obrazovky (režim na šířku nebo na výšku).

Přečtěte si více: Základní podklady pro vlastnosti CSS3

Media queries provide a framework for creating code once and using it multiple times throughout your program. To se nemusí zdát tak užitečné, pokud vyvíjíte web pouze se třemi webovými stránkami, ale pokud pracujete pro společnost se stovkami různých webových stránek - to se ukáže jako obrovská doba spořič.

Existuje několik různých věcí, které musíte vzít v úvahu při používání mediálních dotazů: struktura, umístění, rozsah a propojení.

@ media only / not media-type and (expression) {
/ * Kód CSS * /
}

Obecná struktura mediálního dotazu zahrnuje:

• Klíčové slovo @media
• Klíčové slovo nejen /
• Typ média (což může být buď obrazovka, tisk nebo řeč)
• Klíčové slovo „a“
• Jedinečný výraz uzavřený v závorkách
• Kód CSS uzavřený v dvojici otevřených a zavřených složených závorek.

Příbuzný: Použití CSS k formátování dokumentů pro tisk

@media pouze obrazovka a (max. šířka: 450px) {
tělo{
barva pozadí: modrá;
}
}

Výše uvedený příklad používá styl CSS (konkrétně modrou barvu pozadí) pouze na obrazovky zařízení, které mají šířku 450px a méně - tedy v zásadě chytré telefony. Klíčové slovo „only“ lze nahradit klíčovým slovem „not“ a potom by styl CSS v dotazu na média výše platil pouze pro tisk a řeč.

Ve výchozím nastavení se však obecná deklarace mediálního dotazu vztahuje na všechny tři typy médií, takže není nutné specifikovat typ média, pokud není cílem vyloučit jeden nebo více z nich.

/ * design pro chytré telefony * /
@media (max. šířka: 450px) {
tělo{
barva pozadí: modrá;
}
}

Mediální dotaz je vlastnost CSS; lze jej tedy použít pouze v rámci stylingového jazyka. Existují tři různé způsoby, jak do kódu zahrnout CSS; pouze dvě z těchto metod však poskytují praktický způsob, jak do svých programů zahrnout dotazy na média - interní nebo externí CSS.

Interní metoda zahrnuje přidání

Externí metoda zahrnuje vytvoření mediálního dotazu v externím souboru CSS a jeho propojení s vaším souborem HTML pomocí štítek.

Ať už se dotazy na média používají prostřednictvím interního nebo externího CSS, existuje jeden hlavní aspekt stylovacího jazyka, který může nepříznivě ovlivnit fungování mediálního dotazu. CSS má pravidlo priority. Při použití a Selektor CSS, nebo v tomto případě mediální dotaz, každý nový mediální dotaz, který je přidán do souboru CSS, přepíše (nebo má přednost) před tím, který přišel dříve.

Výchozí kód dotazu na média, který máme výše, je zaměřen na smartphony (šířka 450px a méně), takže pokud jste chtěli nastavit a jiné pozadí pro tablety si možná myslíte, že můžete jednoduše přidat následující kód do svého již existujícího souboru CSS.

/ * design pro tablety * /
@media (max. šířka: 800px) {
tělo{
barva pozadí: červená;
}
}

Jediným problémem je, že z důvodu pořadí priorit by tablety měly červenou barvu pozadí a smartphony by nyní také měly červenou barvu pozadí, protože 450px a méně je pod 800px.

Jedním ze způsobů řešení tohoto malého problému by bylo přidání mediálního dotazu pro tablety před dotazy pro smartphony; druhá by přepsala první a nyní byste měli smartphony s modrou barvou pozadí a tablety s červenou barvou pozadí.

Existuje však lepší způsob, jak dosáhnout samostatného stylu pro smartphony a tablety, aniž byste se obávali pořadí. Toto je funkce mediálních dotazů známá jako specifikace rozsahu, kde může vývojář vytvořit mediální dotaz s maximální a minimální šířkou (rozsah).

/ * design pro tablety * /
@media (max. šířka: 800px) a (min. šířka: 451) {
tělo{
barva pozadí: červená;
}
}

S výše uvedeným příkladem se umístění mediálních dotazů v šabloně stylů stává irelevantní, protože design pro tablety a smartphony cílí na dvě samostatné kolekce šířky.

Pokud nechcete do svého kódu CSS vložit dotazy na média, můžete použít alternativní metodu. Tato metoda zahrnuje použití mediálních dotazů v tagu souboru HTML, takže místo toho, abyste měli jednu masivní šablonu stylů, která obsahuje předvolby stylů pro smartphony, tablety a počítače - můžete použít tři samostatné soubory CSS a vytvářet v nich mediální dotazy the štítek.

The tag je prvek HTML, který se používá k importu stylů CSS z externí šablony stylů. Tato značka má vlastnost média, která funguje stejně jako mediální dotaz v CSS.

 hlavní styl 

 šablony stylů tabletu 
href = "tablet.css">
 seznam stylů smartphonu 

Výše uvedený kód by měl být umístěn v

značka vašeho souboru HTML. Teď vše, co musíte udělat, je vytvořit tři samostatné soubory CSS s názvy souborů main.css, tablet.css a smartphone.css - poté vytvořit konkrétní design, který chcete pro každé zařízení.

Styl v hlavním souboru bude platit pro všechny obrazovky o šířce větší než 800 pixelů, použije se styl v souboru tabletu na všechny obrazovky se šířkou mezi 450px a 801px a styl v souboru smartphonu bude platit pro všechny níže uvedené obrazovky 451 pixelů

Pokud jste se dostali na konec tohoto článku, mohli jste zjistit, co je responzivní design a proč je užitečný. Nyní můžete identifikovat a používat dotazy na média v souborech CSS a HTML. Dále vám bylo představeno pořadí v CSS a zjistili jste, jak by to mohlo ovlivnit fungování vašich mediálních dotazů.

Uznání obrázku: Negative Space /Pexels

Jak nastavit obrázek na pozadí v CSS

CSS je výkonný nástroj pro styling webových stránek. Naučit se, jak umístit obrázek na pozadí, vás naučí spoustu základů CSS.

Přečtěte si další

O autorovi