Reagovat web design-základy

• Nastavit pohled
• Velikost obsah výřezu
• Použít CSS mediální dotazy na schopnosti reagovat
• Jak si vybrat zarážky
• Zobrazit dotaz média zarážky v Chrome DevTools

použití mobilních zařízeních surfovat na webu stále roste na astronomické tempem, a tato zařízení jsou často omezeny velikost displeje a vyžadují odlišný přístup k tomu, jak obsah je stanoven na obrazovce.,

Reagovat web design, původně definována Ethan Marcotte v Seznamu od Sebe, reaguje na potřeby uživatelů a zařízení“re pomocí. Rozložení se mění na základě velikosti a schopností zařízení. Například v telefonu by uživatelé viděli obsah zobrazený v zobrazení jednoho sloupce; tablet může zobrazovat stejný obsah ve dvou sloupcích.

velké množství různých velikostí obrazovky existují, přes telefony, „phablets,“ tablety, stolní počítače, herní konzole, Televizory, a dokonce i wearables., Velikost obrazovky se vždy mění, takže je důležité, aby vaše stránky mohou přizpůsobit jakékoliv velikosti obrazovky, dnes nebo v budoucnu. Kromě toho mají zařízení různé funkce, s nimiž s nimi komunikujeme. Například někteří z vašich návštěvníků budou používat dotykovou obrazovku. Moderní citlivý design zvažuje všechny tyto věci, aby optimalizoval zážitek pro každého.

nastavit výřez #

stránky optimalizované pro různé zařízení musí obsahovat značku meta výřezu v hlavě dokumentu.Značka meta viewport poskytuje pokyny prohlížeče, jak ovládat rozměry a měřítko stránky.,

, Aby se pokusili poskytnout nejlepší zkušenosti, mobilní prohlížeče renderthe stránku na ploše obrazovky na šířku (obvykle o 980px, i když to variesacross zařízení), a pak se snažit, aby obsah vypadat lépe tím, že increasingfont velikosti a měřítka, obsah, aby se vešly na obrazovku.To znamená, že velikosti písma se může objevit v rozporu uživatelům,kteří mohou mít double-tap nebo pinch-to-zoomin, aby bylo vidět a komunikovat s obsahem.,

pomocí hodnoty meta viewport width=device-width instruuje stránku tak, aby odpovídala šířce obrazovky v pixelech nezávislých na zařízení. Zařízení (nebo hustota) nezávislý pixel je reprezentace jednoho pixelu, který může na obrazovce s vysokou hustotou se skládají z mnoha fyzických Pixelů. To umožňuje stránku přeformátovatobsah, aby odpovídal různým velikostem obrazovky, ať už je vykreslen na malém mobilním telefonu nebo na velkém stolním monitoru.,

Některé browserskeep stránce“s konstantní šířka při otáčení na landscapemode, a zoom, spíše než reflow, aby vyplnil obrazovku., Přidávání hodnotyinitial-scale=1 pověřuje prohlížeče vytvořit 1:1 vztah mezi CSSpixels a device-independent pixely bez ohledu na orientaci zařízení, andallows stránky využít plnou šířku šířku.

Nemá <meta name="viewport"> tag width nebo initial-scaleMaják auditu může pomoci automatizovat proces ujistěte se, že vaše HTML dokumenty pomocí meta viewport tag správně.,

Zajistit, aby existoval dostupný výřezu #

kromě nastavení initial-scale,můžete také nastavit následující atributy o výřez:

• minimum-scale
• maximum-scale
• user-scalable

Při nastavení, můžete zakázat uživatele“s možnost zvětšení výřezu,potenciálně působit problémy přístupnosti.Proto bychom nedoporučovali používat tyto atributy.,

Velikost obsah výřezu #

Na obou ploše a mobilními zařízeními,uživatelé se používá k rolování stránky vertikálně, ale ne vodorovně;nutí uživatele, aby vodorovně posouvat nebo zoom v aby bylo vidět celou stránku za následek špatné uživatelské zkušenosti.

při vývoji mobilního webu se značkou meta viewport je snadné náhodně vytvořit obsah stránky,který se do zadaného výřezu nehodí.Například obrázek, který je zobrazen na šířku širší než výhledmůže způsobit, že výřez se posouvá vodorovně.,Tento obsah byste měli upravit tak,aby odpovídal šířce výřezu, takže uživatel nemusí procházet vodorovně.

obsah není správně dimenzován pro audit viewportLighthouse vám může pomoci automatizovat proces detekce přetékajícího obsahu.

obrázky #

obrázek má pevné rozměry a pokud je větší než výřez, způsobí posuvník.Běžným způsobem, jak se s tímto problémem vypořádat, je poskytnout všem obrazům max-width 100%.,To způsobí, že se obraz zmenší tak,aby odpovídal prostoru, který má, pokud by velikost výřezu byla menší než obrázek.Nicméně, protože max-width, nikoli width 100%,obraz nebude natáhnout větší, než je jeho fyzická velikost.To je obecně bezpečná, přidejte následující na vašem stylesheetso, že nikdy nebudete mít problém s obrázky, což způsobuje posuvník.,

Přidat rozměry obrázku img element #

Při použití max-width: 100% jsou převažující fyzické rozměry obrazu,nicméně, měli byste stále používat width height atributy na <img> tag.Je to proto, že moderní prohlížeče budou používat tyto informace, aby vyhradit prostor pro imagebefore to načte,to vám pomůže vyhnout se rozvržení směn jako obsah načte.,

Rozložení #

Od obrazovky rozměry a šířka v CSS pixelů se velmi liší mezi zařízeními(například mezi telefony a tablety, a dokonce i mezi různými telefony),obsah by se neměla spoléhat na konkrétní výřez šířka činí dobře.

v minulosti to vyžadovalo prvky nastavení používané k vytvoření rozvržení v percentages.In níže uvedený příklad, můžete vidět rozložení dvou sloupců s plovoucí prvky, velikosti pomocí pixelů.Jakmile se výřez zmenší než celková šířka sloupců, musíme se pohybovat horizontálně.vidět obsah.,

pomocí procenta pro šířky zůstávají sloupce vždy určitým procentem kontejneru.To znamená, že sloupce jsou užší, spíše než vytváření posuvníku.

Moderní CSS layout techniky, jako Flexbox, Rozvržení Mřížky, a Multicolmake vytvoření těchto flexibilních sítí mnohem jednodušší.,

Flexbox #

Tento způsob uspořádání je ideální, když máte sadu položek z různých sizesand byste chtěli, je, aby se vešly pohodlně v řádku nebo řádků,s menší předměty s méně prostoru a větších dostat více prostoru.

V responzivní design, můžete použít Flexbox k zobrazení položky, jako jeden řádek,nebo zabalené do více řádků, protože dostupný prostor zmenší.

Přečtěte si více o flexboxu.

rozložení mřížky CSS #

rozložení mřížky CSS umožňuje jednoduché vytváření flexibilních sítí.,Pokud vezmeme v úvahu dříve vznášel příklad,spíše než na vytváření naší sloupce s procenty,můžeme použít rozložení mřížky a fr je jednotka,která představuje část dostupného prostoru v kontejneru.

mřížka může být také použita k vytvoření pravidelných rozvržení mřížky s tolika položkami, kolik se vejde.Počet dostupných skladeb se sníží velikost obrazovky se zmenší.V níže uvedené demo, máme tolik karet, kolik se vejde na každý řádek,s minimální velikost 200px.,

Přečtěte si více o CSS Grid Layout

Více-rozložení sloupců #

Pro některé typy rozložení můžete použít Více-Rozložení sloupců (Multicol),které mohou vytvořit responzivní čísla sloupců pomocí column-width majetku.V ukázce níže, můžete vidět, že sloupce jsou přidány, pokud je zde prostor pro další 200px sloupce.,

Přečtěte si více o Multicol

Použití CSS dotazy médií za vstřícnost #

Někdy budete potřebovat, aby se více rozsáhlé změny layoutto podporu určité velikosti obrazovky, než techniky uvedené výše umožní.To je místo, kde se mediální dotazy stanou užitečnými.

mediální dotazy jsou jednoduché filtry, které lze aplikovat na styly CSS.,Dělají to snadno změnit styly na základě typů zařízení vykreslování obsahu,nebo funkce tohoto přístroje, například šířka, výška, orientace, schopnost vznášet se,a to, zda je přístroj použit jako dotykový displej.,

poskytnout různé styly pro tisk,potřebujete se zaměřit na typ výstupu, takže můžete zahrnout stylu s potiskem styly takto:

Případně můžete zahrnout tiskové styly v rámci své hlavní šablony stylů pomocí media query:

Pro responzivní web design, jsme obvykle dotazování vlastnosti devicein cílem poskytnout různé rozložení pro menší obrazovky,nebo když zjistíme, že náš návštěvník je pomocí dotykového displeje.

mediální dotazy založené na velikosti výřezu #

mediální dotazy nám umožňují vytvořit responzivní zkušenostkde jsou specifické styly aplikovány na malé obrazovky, velké obrazovky a kdekoli mezi nimi.Funkce, kterou zde detekujeme, je proto velikost obrazovky a můžeme testovat následující věci.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

Média dotazy založené na schopnosti zařízení #

s ohledem na rozsah zařízení k dispozici, nemůžeme předpokládat, že každé velké zařízení je pravidelný desktopor notebooku, počítače, nebo že lidé jsou jen pomocí dotykové obrazovky na malé zařízení.,S nějakou novější přírůstky do médií dotazy specificationwe můžete vyzkoušet pro funkce, jako je například typ ukazatel se používá k interakci s zařízenía, zda uživatel může vznášet se nad prvky.

• hover
• pointer
• any-hover
• any-pointer

Zkuste prohlížení tohoto demo na různých zařízeních,jako běžný stolní počítač a telefon nebo tablet.

tyto novější funkce mají dobrou podporu ve všech moderních prohlížečích., Zjistěte více na stránkách MDN prohover, any-hover,pointer, any-pointer.

Použití any-hover any-pointer #

funkce any-hover any-pointer test, zda uživatel má capabilityto vznášet se, nebo použít typ ukazatel, i když to není primární způsob, že jsou v interakci s jejich zařízení.Být velmi opatrní při používání těchto.Nutit uživatele k přechodu na myš, když používají dotykovou obrazovku, není příliš přátelské!,Nicméně any-hover a any-pointer může být užitečné, pokud je důležité zjistit, jaké zařízení má uživatel.Například notebook s dotykovým displejem a trackpadem by měl odpovídat hrubým a jemným ukazatelům,kromě schopnosti vznášet se.

jak vybrat body přerušení #

nedefinujte body přerušení na základě tříd zařízení.Definování bodů zlomu na základě konkrétních zařízení, produktů,značek nebo operačních systémů, které se dnes používají, může mít za následek noční můru údržby.,Místo toho by samotný obsah měl určit, jak se rozvržení přizpůsobí jeho kontejneru.

Vybrat hlavní zarážky spuštěním malé, pak pracovat až #

Design obsah, aby se vešly na malé velikosti obrazovky první,pak rozšířit na obrazovce, dokud se zarážka bude nutné.To vám umožní optimalizovat body zlomu na základě obsahua udržovat co nejmenší počet možných bodů přerušení.

nechte pracovat na příkladu, který jsme viděli na začátku: předpověď počasí.Prvním krokem je, aby prognóza vypadala dobře na malé obrazovce.,

dále změňte velikost prohlížeče, dokud mezi prvky není příliš mnoho bílého prostoru,a prognóza jednoduše nevypadá tak dobře.Rozhodnutí je poněkud subjektivní, ale výše 600px je jistě příliš široká.

Chcete-li vložit zarážku na 600px vytvořit dva dotazy médií na konci CSS pro komponentu,jeden použít, když prohlížeč je 600px a níže, a jeden, když to je širší než 600px.

nakonec refaktorujte CSS. Uvnitř mediálního dotazu pro max-width 600pxpřidejte CSS, který je pouze pro malé obrazovky., Uvnitř mediálního dotazu promin-width 601px přidat CSS pro větší obrazovky.

v případě potřeby vyberte menší body přerušení #

kromě výběru hlavních bodů přerušení, když se rozvržení výrazně změní, je také užitečné upravit drobné změny.Například mezi hlavními body zlomu může být užitečné upravit okraje nebo polstrování prvku nebo zvýšit velikost písma, aby se v rozvržení cítil přirozeněji.

nechte začít optimalizací rozložení malé obrazovky.,V tomto případě nechte písmo zvýšit, když je šířka výřezu větší než 360px.Za druhé, když je dostatek místa, můžeme oddělit vysoké a nízké teploty tak, že jsou na stejné čářemísto na sebe.A pojďme také udělat ikony počasí trochu větší.

podobně pro velké obrazovky je nejlepší omezit na maximální šířku panelu prognózytakže nespotřebovává celou šířku obrazovky.,

Optimalizovat text pro čtení #

Klasický čitelnost teorie naznačuje, že ideální sloupec by měl obsahovat 70 až 80 znaků na řádek(asi 8 až 10 slov v angličtině).Takže pokaždé, když šířka textového bloku roste kolem 10 slov, zvažte přidání bodu zlomu.

pojďme se hlouběji podívat na výše uvedený příklad blogu.Na menších obrazovkách, Roboto písma v 1em funguje perfektně dává 10 slov na řádek,ale větší obrazovky vyžadují zarážku.V tomto případě, v případě, že prohlížeč je šířka větší než 575px, ideální šířku obsahu je 550px.,

Vyhněte se jednoduše skrývá content #

Být opatrní při výběru, jaký obsah chcete zobrazit nebo skrýt v závislosti na velikosti obrazovky.Don “ t jednoduše skrýt obsah jen proto, že nemůžete fit ji na obrazovce.Velikost obrazovky není definitivní údaj o tom, co uživatel může chtít.Například, odstranění pylu z počasí forecastcould být vážný problém pro jaro-čas alergiky, kteří potřebují informaci k určení, zda mohou jít ven nebo ne.,

view media query breakpoints in Chrome DevTools #

jakmile máte nastavené body dotazů na média, budete chtít vidět, jak váš web vypadá s nimi.Můžete změnit velikost okna prohlížeče a spustit body přerušení, ale Chrome DevTools má vestavěnou funkci, která usnadňuje vidět, jak stránka vypadápod různými zarážkami.

Chcete-li zobrazit stránku pod různými zarážkami:

otevřete DevToolsand poté zapněte režim zařízení.Ve výchozím nastavení se otevře v responzivním režimu.

Chcete-li zobrazit dotazy na média, otevřete nabídku režim zařízení a vyberteshow Media queriesto zobrazte své body přerušení jako barevné pruhy nad vaší stránkou.

kliknutím na jeden z pruhů zobrazíte stránku, když je aktivní mediální dotaz.,Kliknutím pravým tlačítkem myši na lištu přejdete na definici mediálního dotazu.

---