Vytvorte responzívny web za týždeň: mediálne dotazy (4. časť)

Obsah

• 01. Pridávanie mediálnych dotazov
• 02. Anatómia mediálneho dotazu
• 03. Ešte jedna vec ...
• 04. Výber hraničných hodnôt
• 05. Upravujeme naše miniatúry
• 06. Nielen šírka

• Potrebné znalosti: Medziprodukt CSS a HTML
• Vyžaduje: Textový editor, moderný prehliadač, grafický softvér
• Čas projektu: 1 hodina (spolu 5 hodín)
• Podporný súbor

Relatívne nová súčasť špecifikácie CSS, mediálne dotazy sú nepochybne najzaujímavejším aspektom responzívneho webového dizajnu a oblasťou zrelou na ďalšie experimentovanie.

Keď akceptovali potrebu adaptívnych rozložení, niektorí videli mediálne dotazy ako prostriedok na dodatočné vybavenie adaptívnych rozložení na existujúce weby s pevnou šírkou. Spomedzi tých, ktorí prijali responzívne rozloženia, to mnohí urobili z pohľadu pracovnej plochy, keď sa zúžil výrez, skryli obsah a funkcie.

V celom tomto výučbe sme zaujali alternatívny, najskôr mobilný prístup. Teraz, keď sa chystáme zahrnúť mediálne dotazy, môžeme premýšľať pridanie funkcie, ako sa zvyšuje obrazovka nehnuteľností, s vedomím, že značenie a dizajn, ktorý je základom našej stránky, predstavuje úctyhodnú základňu.

Dnes sa posunieme za hranice nášho portfólia vzorov a vytvoríme jednotlivé stránky potrebné pre náš web. Pritom uvidíme, ako sú zostavené mediálne dotazy, a implementujeme ich skutočne responzívnym spôsobom.

01. Pridávanie mediálnych dotazov

Keď sú komponenty v našom portfóliu vzorov kompletné a pracujú mimo hraníc ľubovoľného rozloženia, je čas ich presunúť na rôzne stránky, ktoré tvoria náš web.

Začneme našou domovskou stránkou. Z dizajnu zameraného na pracovnú plochu vidíme, že v širších výrezoch by sa naše rozloženie malo javiť takto:

Pomocou meraní z nášho návrhu môžeme opísať oblasť dokumentu v CSS nasledovne:

.dokument {
výplň: 0,5%;
}
.hlavný {
šírka: 74,242424242424%; / * 784/1056 * /
plavák: vľavo;
}
.doplnkové {
šírka: 22,727272727273%; / * 240/1056 * /
plavák: vpravo;
}

Ako sme sa dozvedeli v druhej časti tohto tutoriálu, na výpočet percentuálnej šírky týchto stĺpcov používame nasledujúci vzorec:

(cieľ / kontext) * 100 = výsledok

Keď zmeníme veľkosť nášho prehliadača, zistíme, že naše rozloženie pracovnej plochy sa mení od obrazovky s najmenšou veľkosťou po najväčšiu. Samozrejme, pri malých veľkostiach sú stĺpce príliš úzke a dĺžky riadkov také krátke, že sa obsah ťažko číta. Toto rozloženie chceme iba vtedy, keď je k dispozícii dostatok priestoru na jeho fungovanie.

To je miesto, kde prichádzajú mediálne dotazy. Za predpokladu, že by sa toto rozloženie malo prejaviť, iba ak je prehliadač širší ako 768 px, môžeme pridať nasledujúce CSS:

.dokument {
výplň: 0,5%;
}
@media obrazovka a (minimálna šírka: 768 pixelov) {
.hlavný {
šírka: 74,242424242424%; / * 784/1056 * /
plavák: vľavo;
}
.doplnkové {
šírka: 22,727272727273%; / * 240/1056 * /
plavák: vpravo;
}
}

Teraz, keď je zobrazená oblasť užšia ako 768 pixelov, bude všetko vo vnútri dotazu na médiá ignorované. Bude ignorovaný akýmkoľvek prehliadačom, ktorý tiež nepodporuje mediálne dotazy.

02. Anatómia mediálneho dotazu

Aby sme pochopili, čo sa tu deje, pozrime sa, ako je zostavený mediálny dopyt. Môžeme ho rozdeliť na dve časti:

• obrazovka @media: Prvá časť mediálneho dotazu je Typ média. Túto syntax môžete spoznať, ak ste do svojho CSS niekedy zahrnuli štýly tlače. Názov typu tiež môžete poznať z názvu médiá atribút na odkaz> element. Je to tak preto, lebo obaja akceptujú schválenú sadu typov médií, ktorá sa nachádza v špecifikácii CSS 2.1.
• (minimálna šírka: 768 pixelov): Druhou časťou je dopyt. Patria sem: vlastnosť je potrebné zadať dopyt (v tomto prípade minimálna šírka výrezu) a zodpovedajúce hodnotu na testovanie (768px).

Keď hovoríme o responzívnom webovom dizajne, existuje tendencia zameriavať sa na šírku, ale môžeme testovať aj ďalšie funkcie:

• (min- | max-) šírka a (min- | max-) výška: Umožňujú nám dotazovať sa na šírku a výšku výrezu (t. J. Okna prehliadača).
• (min- | max-) šírka zariadenia a (min- | max-) výška zariadenia: Tie nám umožňujú zisťovať šírku celého displeja. Podľa mojich skúseností je zvyčajne rozumnejšie zakladať rozloženia skôr na výreze ako na displeji.
• orientácia: Tu môžete okamžite myslieť na možnosti; myslite na aplikácie, ktoré zobrazujú odlišný obsah na základe orientácie telefónu - to isté je možné aj na webe.
• (min- | max-) pomer strán: To nám umožňuje prispôsobiť rozloženia na základe pomeru okna prehliadača ...
• (min- | max-) pomer strán zariadenia: ... a to nám umožňuje urobiť to isté na základe pomeru strán zariadenia. Owen Gregory minulý rok napísal úžasný článok, ktorý skúma, ako môžeme pomocou tohto dotazu spojiť naše dizajny so zariadeniami, na ktorých sa nachádzajú.
• (min- | max-) čiernobielo: Môžeme tiež vyskúšať, či má zariadenie monochromatický displej alebo nie. Predstavte si, aké užitočné by to bolo, keby zariadenia Amazon s e-atramentom Kindle neklamali a svoje obrazovky nahlásili farebne!

Posledná časť nášho dotazu je možno najužitočnejšia. Používaním a, môžeme otestovať viac funkcií v jednom dotaze. Napríklad:

@media obrazovka a (minimálna šírka: 768 pixelov) a (orientácia: na šírku) {
...
}

Ako vidíte, mediálne dotazy nám môžu pomôcť získať pomerne zaujímavé skúsenosti - a dotkol som sa iba povrchu. Ak hľadáte ľahké čítanie pred spaním, mohlo by to byť horšie, ako si prečítať špecifikáciu dotazu na médiá W3C, ktorá popisuje všetky funkcie, ktoré môžeme testovať.

03. Ešte jedna vec ...

Aj keď sme do nášho CSS zahrnuli mediálne dotazy, pri prezeraní našich stránok na mobilnom zariadení si všimnete, že sa naše stránky stále vykresľujú, akoby bol ich displej širší ako 768 pixelov.

Aby sme pochopili, prečo sa to deje, musíme si vziať krátku lekciu z histórie.

Keď bol v roku 2007 ohlásený pôvodný iPhone, jedným z jeho veľkých predajných miest bola schopnosť prehliadať „skutočný web“, aj keď to znamenalo weby s pevnou šírkou orientované na plochu, ktoré bolo treba stlačiť, aby sa zmestili na jeho malú obrazovku. IPhone to dokázal tak, že nahlásil, že je jeho displej široký 980px, a potom zmenšil veľkosť webových stránok tak, aby sa zmestila na jeho šírku 320px.

Ale iPhone bol predstavený pred príchodom responzívneho dizajnu. Teraz, keď autori navrhujú weby určené pre mobilné zariadenia, je táto funkcia menej užitočná. Apple našťastie zahrnul spôsob, ako obísť toto správanie, a keďže si ho osvojili aj iní výrobcovia, stal sa takmer de facto štandard. Jednoducho to znamená pridať jeden meta prvok do nášho označenia:

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

Toto informuje prehľadávače podporujúce výrez, že webová stránka by sa nemala zmenšovať a že so šírkou okna prehliadača by sa malo zaobchádzať rovnako ako s celkovou šírkou zariadenia. Po pridaní tohto riadku sa náš web zobrazí so zamýšľaným rozložením:

04. Výber hraničných hodnôt

Vráťme sa k nášmu mediálnemu dotazu:

@media obrazovka a (minimálna šírka: 768 pixelov) {
...
}

Hodnoty, pri ktorých sa rozloženie prispôsobí, sa bežne označujú ako zarážky. Ak si spomínate, v druhej časti som povedal, že používanie pixelov je známkou nereagovania, napriek tomu som tu vybral 768px, pravdepodobne preto, že je to šírka známeho zariadenia.

Namiesto výberu hraničných bodov na základe charakteristík populárnych zariadení môže byť efektívnejšie pozrieť sa na hodnoty odvodené z nášho obsahu, napríklad pohodlné dĺžky riadkov na čítanie alebo maximálnu veľkosť obrázka.

Pretože je náš typ dimenzovaný pomocou ems, zdá sa rozumné, aby aj naše mediálne dotazy používali ems. V skutočnosti to má ďalšiu výhodu. Keď používateľ zmení veľkosť textu v prehliadači, stránky sa prispôsobia tak, aby používali menšie zarážky. Náš web sa prispôsobí nielen na základe veľkosti výrezu, ale aj veľkosti písma. V skutočnosti som si uvedomil, aké silné môžu byť, až keď som videl, ako Jeremy Keith predvádza mediálne dotazy na báze em.

Aj keď náš návrh môže poskytnúť určité náznaky možných hraničných hodnôt, často je najlepším spôsobom, ako ich zvoliť, experimenty. Nastavením šírky okna prehľadávača som sa rozhodol, že 800px je dobrá šírka, ktorú je možné prepnúť na zložitejšie rozloženie.

Ako však vyjadrujeme 800 pixlov v ems? Opäť môžeme použiť náš vzorec, ale aký je kontext? Pri výpočte ems pre mediálne dotazy je kontext vždy predvolená veľkosť písma v prehliadači bez ohľadu na to, či bola táto hodnota vo vašom CSS prepísaná. Toto predvolené nastavenie je zvyčajne 16 pixelov, čo nám dáva:

800 / 16 = 50

Teraz môžeme aktualizovať náš mediálny dopyt takto:

@media obrazovka a (minimálna šírka: 50em) {/ * 800px * /
...
}

05. Upravujeme naše miniatúry

Pamätáte si, že v časti 2 sme vytvorili naše miniatúry tak, aby reagovali. Akonáhle obrázky v týchto miniatúrach dosiahnu svoju celú šírku, vpravo od každého obrázka sa objaví oblasť bieleho priestoru. Mediálne dotazy nám opäť umožňujú tento problém vyriešiť.

Tu je náš pôvodný CSS:

ol.media li.media-item {
farba pozadia: #fff;
marža: 0 4,16666666667% 4,16666666667% 0;
šírka: 47,91666666667%;
plavák: vľavo;
}
ol.media li.media-item: nth-child (2n) {
pravý okraj: 0;
}

Bod, v ktorom sa objaví toto biele miesto, je rovnako ako prehliadač širší ako 560 pixelov.Vyberieme túto hodnotu, pri ktorej sa má prepnúť zobrazenie troch miniatúr na riadok. Môžeme to urobiť pridaním nasledujúcich CSS:

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

Všimnite si, že nemusíme prepisovať všetky štýly požadované pre miniatúru vo vnútri tohto mediálneho dotazu, iba tie časti, ktoré chceme prispôsobiť.

Pri prezeraní tejto zmeny v prehliadači si všimnete, že napravo od každej druhej miniatúry nie je žiadny okraj. Je to preto, že nasledujúce pravidlo CSS stále zostáva aktívne:

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

Potrebujeme upraviť CSS v rámci nášho mediálneho dopytu, aby sa obnovila táto hodnota:

@media obrazovka a (minimálna šírka: 35em) {
.media-položka {
šírka: 30,612244897959%; / * 240/784 * /
marža: 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;
}
}

Pri vytváraní mediálnych dotazov si vždy uvedomte podobné problémy s dedičstvom.

06. Nielen šírka

Je dôležité myslieť na mediálne dotazy nielen z hľadiska šírky, ale aj iných premenných. Napríklad video na našej stránke s mediálnymi položkami je čiastočne skryté, keď sa zníži výška výrezu. Máme technológiu:

.media-wrapper objektu {
polstrované dno: 56,25%;
šírka: 100%;
výška: 0;
poloha: relatívna;
}
@media obrazovka a (max. výška: 35em) a (orientácia: na šírku) {/ * 560px * /
.media-wrapper objektu {
šírka: 60%;
polstrované dno: 33,75%;
}
}

Dokonca som zahrnul aj orientačný dotaz, aby som toto správanie ešte vylepšil.

Podobný prístup môžeme uplatniť aj v prípade ostatných častí nášho dizajnu, keď zameníme väčšiu verziu hlavičky a presunieme navigačné odkazy do hornej časti stránky, hneď ako bude k dispozícii miesto.

• Navštívte našu responzívnu domovskú stránku
• Prezrite si stránku s responzívnymi mediálnymi položkami

A máme to! Vytvorili sme responzívny web - a máme deň nazvyš! No nie celkom. Flexibilné rozloženie, obrázky a dotazy na médiá sú iba začiatkom procesu responzívneho návrhu.

Zajtra: V záverečnej časti tohto tutoriálu pôjdeme nad rámec responzívneho webdizajnu a pozrieme sa na to, ako môžeme zostaviť skutočne responzívne weby.

Paul je návrhár interakcií so sídlom v anglickom Brightone. Je najšťastnejší pri vytváraní jednoduchých, ale pútavých rozhraní, ktoré sú pôvodom z webu.