Jak používat mediální dotazy v HTML a CSS k vytváření responzivních webů

Jak používat mediální dotazy v HTML a CSS k vytváření responzivních webů

Pokud chcete vyvíjet webové stránky/webové aplikace, je pro váš úspěch zásadní znalost vytváření responzivních návrhů.





V minulosti bylo vytváření webových stránek, které se dobře přizpůsobily různým velikostem obrazovky, luxusem, který museli majitelé webových stránek požadovat od vývojáře. Díky nárůstu používání chytrých telefonů a tabletů je nyní responzivní design ve světě vývoje softwaru nezbytností.



Použití 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.





Pochopení responzivního designu

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

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

Co jsou mediální dotazy?

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



Přečtěte si více: Cheat Sheet Essential CSS3 Properties

Mediální dotazy poskytují rámec pro vytvoření kódu jednou a jeho několikanásobné použití v celém programu. 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 - ukáže se to jako obrovská úspora času.



Používání mediálních dotazů

Při používání mediálních dotazů je třeba vzít v úvahu několik různých věcí: struktura, umístění, rozsah a propojení.

Struktura mediálních dotazů

Příklad struktury mediálního dotazu


@media only/not media-type and (expression){
/*CSS code*/
}

Obecná struktura mediálního dotazu zahrnuje:



  • Klíčové slovo @media
  • Klíčové slovo ne/jediné
  • Typ média (kterým může být 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ý: Formátování dokumentů pro tisk pomocí CSS

Příklad mediálního dotazu s jediným klíčovým slovem


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Výše uvedený příklad aplikuje styl CSS (konkrétně modrou barvu pozadí) pouze na obrazovky zařízení, které mají šířku 450 pixelů a méně - tedy v zásadě chytré telefony. Jediné klíčové slovo lze nahradit klíčovým slovem not a styl CSS ve výše uvedeném mediálním dotazu by platil pouze pro tisk a řeč.

Ve výchozím nastavení se však deklarace obecného 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.

Výchozí příklad mediálního dotazu


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Umístění mediálních dotazů

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 zahrnout CSS do kódu; pouze dvě z těchto metod však poskytují praktický způsob, jak do vašich programů zahrnout mediální dotazy - interní nebo externí CSS.

Interní metoda zahrnuje přidání značky do značky souboru HTML a vytvoření mediálního dotazu v rámci parametrů značky.

Externí metoda zahrnuje vytvoření mediálního dotazu v externím souboru CSS a jeho propojení se souborem HTML prostřednictvím značky.

Rozsah mediálních dotazů

Ať už jsou mediální dotazy používány prostřednictvím interního nebo externího CSS, existuje jeden hlavní aspekt stylingového jazyka, který může nepříznivě ovlivnit fungování mediálních dotazů. CSS má pravidlo pořadí přednosti. Při použití voliče CSS, nebo v tomto případě mediálního dotazu, každý nový mediální dotaz přidaný do souboru CSS přepíše (nebo má přednost před) ten, který byl uveden dříve.

Výchozí kód dotazu na média, který máme výše, se zaměřuje na smartphony (450px široký a nižší), takže pokud byste chtěli nastavit jiné pozadí pro tablety, můžete si myslet, že můžete jednoduše přidat následující kód do vašeho již existujícího souboru CSS.

Příklad dotazu na tabletová média


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Jediným problémem je, že vzhledem k pořadí priority by tablety měly červenou barvu pozadí a smartphony by nyní také měly červenou barvu pozadí, protože 450 pixelů a méně než 800 pixelů.

Jedním ze způsobů, jak tento malý problém vyřešit, by bylo přidat mediální dotaz na tablety před dotaz na chytrý telefon; druhý by přepsal 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 museli starat o pořadí. Jedná se o funkci mediálních dotazů známých jako specifikace rozsahu, kdy vývojář může vytvořit mediální dotaz s maximální a minimální šířkou (rozsah).

Dotaz na tabletová média s příkladem rozsahu


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

Pokud nechcete do kódu CSS vkládat dotazy na média, můžete použít alternativní metodu. Tato metoda zahrnuje použití mediálních dotazů ve značce souboru HTML, takže místo jedné rozsáhlé šablony stylů, která obsahuje předvolby stylů pro chytré telefony, tablety a počítače - můžete použít tři samostatné soubory CSS a ve značce vytvořit své mediální dotazy.

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




href='tablet.css'>


Výše uvedený kód by měl být umístěn do značky vašeho souboru HTML. Nyní stačí 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ý byste chtěli pro každé zařízení.

Styl v hlavním souboru se bude vztahovat na všechny obrazovky se šířkou větší než 800 pixelů, styl v souboru tabletu se bude vztahovat na všechny obrazovky se šířkou mezi 450 pixely a 801 pixely a styl v souboru smartphonu se bude vztahovat na všechny níže uvedené obrazovky 451px.

jak dlouho by měl macbook pro vydržet

Nyní máte nástroje k vytváření responzivních návrhů

Pokud jste se dostali na konec tohoto článku, mohli jste se dozvědět, co je responzivní design a proč je užitečný. Nyní můžete identifikovat a používat mediální dotazy v souborech CSS a HTML. Navíc jste byli seznámeni s pořadím přednosti v CSS a viděli jste, jak to může ovlivnit fungování vašich mediálních dotazů.

Image Credit: Negative Space/ Pexels

Podíl Podíl tweet E-mailem Jak nastavit obrázek na pozadí v CSS

CSS je účinný nástroj pro úpravu webových stránek. Naučit se umísťovat obrázek na pozadí vás naučí mnoho základů CSS.

Číst dále Související témata
  • Programování
  • Vývoj webu
  • Webový design
  • CSS
O autorovi Kadeisha Kean(21 článků zveřejněno)

Kadeisha Kean je vývojář softwaru a technický/technologický spisovatel v plném zásobníku. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; produkující materiál, kterému každý technologický nováček snadno porozumí. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeisha Kean

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru