Před několika lety bylo relativně snadné navrhnout a vytvořit webové stránky. Webové stránky byly jednodušší a zobrazovaly se na stolních počítačích a přenosných počítačích s malou variabilitou velikosti obrazovky. Dnes s mobilními zařízeními, které přebírají čas procházení diváků, lze web navštívit na obrazovce smartphonu o rozměrech 4,8 ", 5" phabletu, 7 "nebo jakékoli velikosti.
Jak tedy zajistíte, aby se vaše webové stránky zobrazovaly správně v různých typech zařízení a velikostech obrazovky?
Řešení bylo nejprve navrženo Ethan Marcotte, když zkoumal způsoby, jak učinit návrhy webových stránek citlivé, tj. je třeba je měnit podle velikosti obrazovky. Odpovídající návrh webových stránek je takový, který šikovně využívá CSS k tomu, aby zajistil, že webové stránky budou fungovat dobře v široké škále velikostí obrazovky - aniž by se uchýlili k přesměrování URL nebo k dynamickému zobrazování různých kódů HTML a CSS v závislosti na UserAgentu. Není to skutečně technologie nebo standard, ale spíše soubor návrhových zásad, které pomáhají dosáhnout výsledku.
Během posledních několika let vznikla řada citlivých šablon, rámců CSS a témat WordPress. Je například možné vytvořit v aplikaci WordPress citlivé webové stránky bez psaní jediného řádku kódu.
Ale skutečný webový návrhář není spokojen s používáním šablon. Usiluje o pochopení prvků citlivého návrhu webových stránek, aby je efektivně využila.
Takže dnes se podíváme na tři základní techniky, které potřebujete k zvládnutí, budete účinně reagovat na návrháře.
Dotazy médií vám umožňují navrhnout různé rozvržení pro různé typy médií, jako jsou obrazovky, tisk, televize, kapesní zařízení atd. V závislosti na typu média můžete nakonfigurovat styl, písmo a další prvky stránky.
Představené v CSS3, mediální dotazy umožňují návrháři přizpůsobit prezentaci obsahu tak, aby vyhovoval určitému rozsahu typů výstupních zařízení. Jedná se o deklaraci typu média a jeden nebo více výrazů v médiích, které jsou vyhodnoceny jako pravdivé nebo nepravdivé.
Sortiment typů médií zahrnuje ruční, obrazovku, tv, tisk a projekci. Funkce médií zahrnují mimo jiné výšku, šířku, poměr stran, rozlišení, barevný index a výšku, šířku okna prohlížeče.
Učiňme základní příklad; Představte si, že chcete zmenšit velikost textu na menších zařízeních, jako jsou telefony. Dotaz na to by vypadal něco jako:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Nyní bude velikost písma vašich odstavců nastavena na hodnotu 1em, pokud není šířka prohlížeče menší než 400 pixelů, v tomto případě se zmenší na 0,8m.
Podle mých zkušeností je nejlepším způsobem, jak navrhnout uspokojivé uspořádání, nejprve vytvořit výchozí hlavní stylový list s hlavními konstrukčními prvky. Poté můžete do mediálních dotazů přidat přizpůsobení prvků na základě uspořádání nebo jiných prvků zařízení. Pokud je to víc než jen několik pravidel, může být lepší je přesunout na samostatný podřízený list - který si můžete vybírat později. Zde je návod, jak to funguje:
Tento kód kontroluje, zda je zařízení v ručním režimu v režimu na šířku a šířka zařízení je menší než 720 pixelů a pokud ano, načte tabulku stylů tablet_layout.css .
Všimněte si, že šířka a výška funkcí šířky, výšky, min / max-šířka, min / max-výška se vztahují k šířce a výšce okna prohlížeče. Šířka a výška zařízení jsou řízena šířkou zařízení, výškou zařízení, min / max- šířka zařízení, min / max- výška zařízení . Pokud byste se chtěli podívat více příkladů pomocí dotazů na média MDN má dobré zaokrouhlování.
"Fluidní mřížka" je termín používaný k popisu uspořádání, které je kódováno relativně v poměru různých prvků, nikoliv s pevnými pixelovými hodnotami.
Tradiční rozvržení CSS používaly mřížky s pevnou šířkou pro umístění prvků. Přístroj s pevnou šířkou už dnes nefunguje, protože máme obrazovky o rozměrech od 3 palců do několika stop. V konstrukci rozvodné sítě je vše kódováno z hlediska jeho relativního poměru k základnímu prvku, tj. Namísto specifikace výšky a šířky každého prvku; dává se procentuální nebo relativní velikost.
Představte si, že máte čtyři sloupce. Chcete-li vytvořit tuto tekutinu, namísto toho, abyste ji specifikovali jako šířku 200 pixelů, musíte zadat hodnotu 0,2083% (tj. 200/960). Alespoň tohle je princip. Vytvoření zcela tekuté sítě vyžaduje velkou péči. Je to jeden z těch vzácných případů, které bych raději doporučil používat vlastní nástroje. Tiny Fluid Grid , Systém proměnné mřížky a Mřížka základní tekutiny jsou některé skvělé alternativy k psaní vlastní tekuté mřížky od začátku.
Snímky jsou považovány za flexibilní, pokud se obraz vykreslí v nativní velikosti, pokud to kontejner HTML podporuje, ale když se okno prohlížeče zmenší, obraz se změní tak, aby se vešel.
I když je zbytek konstrukce plynulý a citlivý, nebude to fungovat dobře, pokud všechny komponenty nebudou měnit. To může být složité s obrázky a videa. Obraz široký 700 pixelů vypadá skvěle na pracovní ploše, ale při pohledu na tabletu o velikosti 320 pixelů se rozsekne. Většina moderních reagujících návrhů využívá vlastnost max. Šířky CSS pro zvětšování obrazu. (Tato metoda byla nejprve navrhl Richard Butler .)
img {max-width: 100%;}Tato řada řádků zajistí, že se obraz nezruší, nastavením maximální šířky obrazu na 100% kontejneru. Pokud se okno nebo obrazovka prohlížeče zmenší, tento snímek CSS sníží obraz poměrně. Výška je automaticky nastavena, přičemž poměr stran je zachován.
Můžete místo toho uzamknout obraz zaujmout určitou vertikální podobu obrazovky jako je tato
img {max-height: 75%;}(Ujistěte se, že nepoužíváte oba vlastnosti max-height a max-width společně.)
Velikost obrázku může být také spojena s velikostí textu namísto nadřazeného prvku pomocí em , například takto:
img {width: 30em;}Pokud obrázek obsahuje text, můžete omezit minimální / maximální velikost, abyste zajistili čitelnost textu. Můžete jej zadat takto:
img {width: 30em;max-width: 500px;min-width: 100px;}Stejné techniky lze použít pro škálování videa, například:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Odpovědný design je budoucností našeho průmyslu, ale s tolika různými technikami, které létají, je často těžké udržet krok. Vychovávejte tyto 3 jednoduché techniky a vy budete 90% způsobu, abyste byli vnímaví návrháři.
Doporučený snímek / náhled, elastický obraz přes Shutterstock.