Vytvoření responzivního webu za týden: dotazy na média (část 4)

Obsah

• 01. Přidávání mediálních dotazů
• 02. Anatomie mediálního dotazu
• 03. Ještě jedna věc ...
• 04. Volba hraničních bodů
• 05. Upravujeme naše miniatury
• 06. Nejen šířka

• Potřebné znalosti: Zprostředkující CSS a HTML
• Vyžaduje: Textový editor, moderní prohlížeč, grafický software
• Čas projektu: 1 hodina (celkem 5 hodin)
• Podpůrný soubor

Relativně nová součást specifikace CSS, dotazy na média jsou nepochybně nejzajímavějším aspektem responzivního webového designu a oblastí zralou pro další experimentování.

Poté, co přijali potřebu adaptivních rozvržení, někteří viděli dotazy na média jako prostředek k dovybavení adaptivních rozvržení na stávající weby s pevnou šířkou. Mezi těmi, kteří přijali responzivní rozvržení, mnoho z nich tak učinilo z pohledu plochy, skrývajíc obsah a funkce, jak se výřez zužuje.

V celém tomto výukovém programu jsme zvolili alternativní, nejprve mobilní přístup. Nyní, když se podíváme na zahrnutí mediálních dotazů, můžeme přemýšlet přidávání funkce, jak se zvyšuje obrazovka nemovitostí, bezpečné s vědomím, že označení a design, který je základem našeho webu, poskytuje úctyhodnou základní linii.

Dnes se přesuneme nad rámec našeho vzorového portfolia a vytvoříme jednotlivé stránky potřebné pro náš web. Přitom uvidíme, jak jsou konstruovány dotazy médií, a implementujeme je skutečně responzivním způsobem.

01. Přidávání mediálních dotazů

Když jsou komponenty v našem portfoliu vzorů kompletní a fungují mimo hranice jakéhokoli rozložení, je čas je přesunout na různé stránky, které tvoří náš web.

Začneme naší domovskou stránkou. Z designu orientovaného na plochu vidíme, že v širších výřezech by se naše rozložení mělo objevit následovně:

Na základě měření z našeho návrhu můžeme popsat oblast dokumentu v CSS takto:

.dokument {
výplň: 0,5%;
}
.hlavní {
šířka: 74,242424242424%; / * 784/1056 * /
plavat vlevo;
}
. doplňkové {
šířka: 22,727272727273%; / * 240/1056 * /
float: správně;
}

Jak jsme se dozvěděli v druhé části tohoto tutoriálu, k výpočtu procentní šířky těchto sloupců používáme následující vzorec:

(cíl / kontext) * 100 = výsledek

Když změníme velikost našeho prohlížeče, uvidíme, že naše rozložení plochy se mění od obrazovky s nejmenší velikostí po největší. Samozřejmě, při malých velikostech jsou sloupce příliš úzké a délky řádků tak krátké, že je obtížné číst obsah. Toto rozvržení chceme pouze v případě, že je k dispozici dostatek místa pro jeho fungování.

Tady přicházejí dotazy na média. Za předpokladu, že by se toto rozložení mělo projevit pouze v případě, že je prohlížeč širší než 768 pixelů, můžeme přidat následující CSS:

.dokument {
výplň: 0,5%;
}
@media obrazovka a (min. šířka: 768px) {
.hlavní {
šířka: 74,242424242424%; / * 784/1056 * /
plavat vlevo;
}
. doplňkové {
šířka: 22,727272727273%; / * 240/1056 * /
float: správně;
}
}

Nyní, když je výřez užší než 768px, bude vše uvnitř mediálního dotazu ignorováno. Bude ignorován jakýmkoli prohlížečem, který také nepodporuje dotazy médií.

02. Anatomie mediálního dotazu

Abychom pochopili, co se tady děje, pojďme se podívat na to, jak je konstruován mediální dotaz. Můžeme jej rozdělit na dvě části:

• obrazovka @media: První částí mediálního dotazu je typ média. Tuto syntaxi poznáte, pokud jste do CSS někdy zahrnuli styly tisku. Název typu můžete také poznat z média atribut na odkaz> živel. Důvodem je, že oba přijímají schválenou sadu typů médií nalezenou ve specifikaci CSS 2.1.
• (min. šířka: 768px): Druhou částí je dotaz. To zahrnuje Vlastnosti být dotazován (v tomto případě minimální šířka výřezu) a odpovídající hodnota otestovat (768px).

Když mluvíme o responzivním designu webu, existuje tendence zaměřovat se na šířku, ale existují i ​​další funkce, které můžeme testovat:

• (min- | max-) šířka a (min- | max-) výška: Ty nám umožňují dotazovat se na šířku a výšku výřezu (tj. Okna prohlížeče).
• (min- | max-) šířka zařízení a (min- | max-) výška zařízení: Ty nám umožňují dotazovat se na šířku celého displeje. Podle mých zkušeností je obvykle rozumnější zakládat rozvržení na výřezu než na displej.
• orientace: Zde můžete okamžitě myslet na možnosti; Přemýšlejte o aplikacích, které zobrazují odlišný obsah na základě orientace telefonu - totéž je možné na webu.
• (min- | max-) poměr stran: To nám umožňuje přizpůsobit rozvržení na základě poměru okna prohlížeče ...
• (min- | max-) poměr stran zařízení: … A to nám umožňuje udělat totéž na základě poměru stran zařízení. Owen Gregory minulý rok napsal skvělý článek, který zkoumal, jak můžeme pomocí tohoto dotazu spojit naše designy se zařízeními, na kterých se objevují.
• (min- | max-) černobíle: Můžeme také otestovat, zda má zařízení monochromatický displej. Představte si, jak užitečné by to bylo, kdyby zařízení Amazon Kindle s e-inkoustem nelhala a nehlásila své obrazovky barevně!

Poslední část našeho dotazu je možná nejužitečnější. Používáním a, můžeme otestovat více funkcí v jednom dotazu. Například:

@media obrazovka a (min. šířka: 768px) a (orientace: na šířku) {
...
}

Jak vidíte, dotazy na média nám mohou pomoci vytvořit docela poutavé zážitky - a já jsem se jen dotkl povrchu. Pokud hledáte lehké čtení před spaním, můžete udělat horší, než si přečíst specifikaci mediálního dotazu W3C, která popisuje všechny funkce, které můžeme testovat.

03. Ještě jedna věc ...

I když jsme do našeho CSS zahrnuli dotazy na média, pokud si prohlížíme náš web na mobilním zařízení, všimnete si, že se náš web stále vykresluje, jako by byl displej širší než 768 pixelů.

Abychom pochopili, proč se to děje, musíme si vzít krátkou lekci z historie.

Když byl v roce 2007 oznámen původní iPhone, jedním z jeho velkých prodejních bodů byla schopnost procházet „skutečný web“, i když to znamenalo weby s pevnou šířkou určené pro stolní počítače, které bylo potřeba zmáčknout, aby se vešly na jeho malou obrazovku. IPhone to dokázal tím, že nahlásil, že jeho displej je široký 980px, a poté změnil měřítko webových stránek tak, aby se vešly na jeho obrazovku o šířce 320px.

Ale iPhone byl představen před příchodem responzivního designu. Nyní, když autoři navrhují weby určené pro mobilní zařízení, je tato funkce méně užitečná. Naštěstí Apple zahrnoval způsob, jak toto chování obejít, a protože jej přijali ostatní výrobci, stal se téměř de facto Standard. Jednoduše zahrnuje přidání jednoho meta prvek do našeho označení:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

To říká prohlížečům podporujícím výřez, že web by neměl být zmenšen a že šířka okna prohlížeče by měla být považována za stejnou jako celková šířka zařízení. Jakmile přidáme tento řádek, objeví se náš web se zamýšleným rozvržením:

04. Volba hraničních bodů

Vraťme se k našemu mediálnímu dotazu:

@media obrazovka a (min. šířka: 768px) {
...
}

Hodnoty, při kterých se rozložení přizpůsobí, se běžně označují jako zarážky. Pokud si vzpomenete, ve druhé části jsem řekl, že používání pixelů je známkou nereagujícího myšlení, přesto jsem zde vybral 768px, pravděpodobně proto, že je to šířka známého zařízení.

Místo výběru zarážek na základě charakteristik populárních zařízení může být efektivnější podívat se na hodnoty odvozené z našeho obsahu, například pohodlné délky řádků pro čtení nebo maximální velikost obrázku.

Vzhledem k tomu, že náš typ je dimenzován pomocí ems, zdá se rozumné, aby i naše mediální dotazy používaly ems. Ve skutečnosti to má další výhodu. Když uživatel změní velikost textu v prohlížeči, stránky se přizpůsobí tak, aby používaly menší zarážky. Nejen, že se naše webové stránky přizpůsobí podle velikosti výřezu, ale také podle velikosti písma. Ve skutečnosti jsem si uvědomil, jak silné mohou být, až když jsem viděl, jak Jeremy Keith předvádí mediální dotazy založené na em.

I když náš design může poskytnout určitou indikaci možných hraničních bodů, často je nejlepším způsobem, jak je zvolit, experimentování. Nastavením šířky okna prohlížeče jsem se rozhodl, že 800px je dobrá šířka, při které lze zaměnit složitější rozvržení.

Jak však 800px vyjádříme v ems? Opět můžeme použít náš vzorec, ale jaký je kontext? Při výpočtu ems pro dotazy médií je kontext vždy výchozí velikost písma prohlížeče bez ohledu na to, zda byla tato hodnota přepsána ve vašem CSS. Toto výchozí nastavení je obvykle 16px, což nám dává:

800 / 16 = 50

Nyní můžeme aktualizovat náš mediální dotaz takto:

@media obrazovka a (min. šířka: 50em) {/ * 800px * /
...
}

05. Upravujeme naše miniatury

Určitě si budete pamatovat, že v části 2 jsme navrhli naše miniatury tak, aby reagovaly. Jakmile však obrázky v těchto miniaturách dosáhnou své plné šířky, napravo od každého obrázku se objeví oblast bílého prostoru. Opět nám mediální dotazy umožňují tento problém vyřešit.

Tady je náš původní CSS:

ol.media li.media-item {
barva pozadí: #fff;
marže: 0 4,16666666667% 4,16666666667% 0;
šířka: 47,91666666667%;
plavat vlevo;
}
ol.media li.media-item: nth-child (2n) {
pravý okraj: 0;
}

Bod, ve kterém se toto prázdné místo objeví, je právě tak, jak prohlížeč roste širší než 560 pixelů.Vybereme tuto hodnotu, při které se má vyměnit zobrazení tří miniatur na řádek. Můžeme to udělat přidáním následujících CSS:

@media obrazovka a (min. šířka: 35em) {
.media-item {
šířka: 30,612244897959%; / * 240/784 * /
marže: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
pravý okraj: 0;
}
}

Všimněte si, že nepotřebujeme přepsat všechny styly požadované pro miniaturu uvnitř tohoto mediálního dotazu, pouze části, které si přejeme přizpůsobit.

Při prohlížení této změny v prohlížeči si všimnete, že napravo od každé druhé miniatury není žádný okraj. Je to proto, že následující pravidlo CSS stále zůstává aktivní:

ol.media li.media-item: nth-child (2n) {
pravý okraj: 0;
}

Abychom tuto hodnotu resetovali, musíme v našem mediálním dotazu upravit CSS:

@media obrazovka a (min. šířka: 35em) {
.media-item {
šířka: 30,612244897959%; / * 240/784 * /
marže: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
okraj vpravo: 4,081632653061%;
}
.media-item: nth-child (3n) {
pravý okraj: 0;
}
}

Při vytváření mediálních dotazů mějte vždy na paměti problémy s dědičností, jako je tento.

06. Nejen šířka

Je důležité přemýšlet o mediálních dotazech nejen z hlediska šířky, ale také dalších proměnných. Například video na naší stránce s mediálními položkami je částečně skryto, když se zmenší výška výřezu. Máme technologii:

.media-object-wrapper {
polstrované dno: 56,25%;
šířka: 100%;
výška: 0;
pozice: relativní;
}
@media obrazovka a (max. výška: 35em) a (orientace: na šířku) {/ * 560px * /
.media-object-wrapper {
šířka: 60%;
polstrované dno: 33,75%;
}
}

Dokonce jsem zahrnoval orientační dotaz, který toto chování ještě vylepšil.

Podobný přístup můžeme použít i pro ostatní části našeho designu, vyměníme si větší verzi záhlaví a přesuneme navigační odkazy do horní části stránky, jakmile bude k dispozici prostor.

• Podívejte se na naši responzivní domovskou stránku
• Podívejte se na naši stránku s citlivými mediálními položkami

A tady to máme! Vytvořili jsme responzivní web - a máme den navíc! No, ne tak docela. Flexibilní rozvržení, obrázky a dotazy na média jsou pouze začátkem procesu responzivního designu.

Zítra: V závěrečné části tohoto tutoriálu přejdeme za responzivní webový design a podíváme se, jak můžeme vytvářet skutečně responzivní weby.

Paul je návrhář interakcí se sídlem v anglickém Brightonu. Je nejšťastnější, když vytváří jednoduchá, ale poutavá rozhraní, která jsou nativní pro web.