Adaptivní rozvržení webových stránek: podrobné pokyny s příklady

Rozložení je vytvoření struktury a návrhu prvků webové stránky. Psací kód pro webovou stránku je návrhář rozvržení nebo přední vývojář. Používá grafický program pro řezání rozvržení, editor kódu, další programy pro urychlení procesu.

Co je rozložení

Kód rozložení je kostra stránky stránky, napsaná v značkovacím jazyce html. Skládá se z logicky rozdělených částí stránek - značek. Každý z nich je zodpovědný za jeho oblast: menu, suterén, média, formuláře, mapy, vyhledávání stránek, čas. Mají atributy, s jejich pomocí jsou identifikovány jednotlivé prvky. Kaskádové styly jsou zodpovědné za návrh a javascript pro dynamické efekty.

Kvalitní rozvržení je stejně zobrazeno ve všech prohlížečích. Výsledek je určen provedením řady testů. Schopnost pracovat na více než jedné hardwarové platformě se nazývá cross-platform. Existuje několik přístupů k implementaci rozvržení pomocí různých rámců.

Pro vytvoření stránek podle moderních standardů se používají různé metody adaptivního uspořádání. Tím je zajištěno správné zobrazení prvků na všech typech obrazovky.

Typy rozvržení

Normy se neustále zlepšují a v důsledku toho se způsoby vývoje rozvržení mění. V současné době existují 3 hlavní typy stránek:

• statické;
• pryž;
• adaptivní.

Statické rozvržení jsou stránky, které nemohou změnit svůj návrh. Jejich design se nemění a rozměry prvků mají jasný význam.

Adaptivní rozvržení znamená, že se prvky webu přizpůsobí velikosti obrazovky použitého zařízení. Při změně šířky dokumentu se bloky znovu sestaví, některé části jsou nahrazeny jinými, některé prvky zmizí. Myšlenka přizpůsobivosti nahradila mobilní verze webu, žijící na samostatných subdoménách. Hlavním principem vytváření adaptability je vyvinout návrh pro tři obrazovky: počítač, tablet, smartphone.

Při vytváření gumového rozvržení se rovněž zohledňuje změna velikosti obrazovky a všechny prvky se upravují. Hlavní rozdíl od adaptivního je, že rozložení se rozšiřuje nebo zmenšuje pod obrazovkou v každém okamžiku změny.

Zkontrolujte, který ze zásad se používá, a to následujícím způsobem. Pokud při roztahování okna prohlížeče je stránka spolu s ním roztažena, je to gumové rozložení. Když se stránka stránky změní pouze na několik pozic, znamená to, že je přizpůsobivá.

Rozměry pro adaptivní uspořádání

K vytvoření adaptivních rozvržení se použijí relativní jednotky měření namísto standardních statických pixelů. Nejčastější:

• em;
• rem;
• %

V adaptivním uspořádání na html je em použito pro nastavení velikosti písma a odsazení. Ve výchozím nastavení je 1 em 16 pixelů. Proto, chcete-li nastavit písmo pro odstavce p s velikostí 32 pixelů, musíte zadat následující:

p {

velikost písma: 2m;

}}

Zvláštností použití jednotky je, že 1em se rovná velikosti písma jeho prvku. To znamená, že 1em má různé hodnoty v různých částech kódu. Například v bloku, kde je velikost písma 2m (32px), bude okraj v 1em 32 pixelů. Ale kde je písmo 1em (16px), výplň v 1em se bude rovnat standardním 16 pixelům.

Rem - root em, který je definován ve značce . 1 kořen-em, na rozdíl od 1em, se rovná jednomu číslu za jakýchkoli okolností. Hodnota se mění pouze v případě, že jsou změny vynuceny.

Procenty se obvykle používají pro nastavení šířky bloků nebo obrázků. Bez ohledu na velikost obrazovky bude odpovídat zadané hodnotě, například 80%.

Dotazy médií

CSS obsahuje podporu pro různé technické parametry zařízení. Je určen inteligentní telefon s malou rozšiřovací obrazovkou, jeho vlastnost stylu je uvedena pod její hodnotou. Dotazy médií odhalují rozdíly v orientaci: na výšku a na šířku. Široce se používá k vytvoření adaptivního uspořádání. Rozložení přizpůsobte zadanému rozlišení obrazovky struktura dokumentu se mění podle kódu.

Určené typy zařízení:

• braillské přístroje a tiskárny vyražené pro nevidomé;
• konvenční tiskárny;
• obrazovka monitoru obrazovky;
• řeč syntezátory řeč;
• tv tv.

V hodnotě názvu požadavku existuje několik podmínek. Například zobrazení obsahu pouze pro obrazovky monitoru a pouze maximální šířku 600 px. Vypadá to takto:

@media obrazovka a (max-šířka: 600px) {výstupní kód}.

Adaptivní návrh je založen na použití dotazů na média. Vytvoří rozvržení pro obrazovky o minimální šířce 1200 pixelů, tělo kódu je umístěno na obrazovce @media a (max-width: 1200px) {}. Dále je vytvořen blok pro obrazovky @media a tablety {min-width: 700px) {} a @media a (max-width: 699px) {} mobilní zařízení.

Mobile nejprve

Podle nejnovějších ukazatelů pocházejí z mobilních zařízení a tablet na internet mnohem častěji než z počítačů. Podle toho se mobilní provoz stává pro webové stránky smysluplnější. Vzhledem k takovým vlastnostem, jako je malá velikost obrazovky, uživatelé modulů gadget upřednostňují weby od prvních řádků výsledků vyhledávání, tráví méně času při vyhledávání informací.

Přístup Mobile First zahrnuje zobrazení nejdůležitějšího obsahu, snadné a optimalizované webové stránky a odmítnutí stahovat další zdroje.

Adaptivní rozložení místa podle této metodologie umožňuje počáteční vytvoření stránky pro malé obrazovky a následné přidání prvků, které vyžaduje návrh stránky pro velký monitor. Navzdory průhlednosti přístupu se zákazníci a realizátoři snaží vyvinout velké úsilí o úplnou revizi obvyklé metody rozvoje webu.

Bootstrap

Jeden z populárních rámců, který dal jednoduchou odpověď na otázku, jak vytvořit adaptivní layout, je Twitter Bootstrap. Pomocí 12-sloupové mřížky bootstrap se vytvářejí webové stránky, které jsou ve výchozím nastavení zobrazovány správně na obrazovkách mobilních zařízení. Mezi hlavní nástroje patří:

• předem stanovená šířka sloupců, která může určit šířku prvků;
• pevné a gumové součásti dokumentů;
• vestavěná písma a třídy pro ně;
• prostředky konstrukčních stolů;
• návrhové třídy v panelu nástrojů nabídky.

Dynamické efekty jsou zapsány v jQuery, SASS preprocesor SASS se používá k popisu vzhledu a oblíbené webové písma jsou integrovány do funkčnosti. Stránky vyvinuté na nejnovější verzi bootstrapu se nezobrazují správně v zřídka používaných verzích prohlížečů, jako jsou například IE8, IE9 a iOS 6. Je třeba poznamenat, že kořenový adresář je používán jako velikost písma pro některé prvky. Oficiální webové stránky obsahují podrobné příručky v angličtině a ruštině, příklady adaptivního uspořádání, metody použití integrovaných komponent.

Nadace

Nadace je výkonný rámec, jeden z hlavních konkurentů Twitter Bootstrap. Podporuje všechny velikosti sítí, má řadu výhod, které v Bootstrap chybí.

Komponenty se vyznačují velkou řadou různých animačních efektů, které lze přizpůsobit. Správa stylu využívá předzesilovač SASS. Seznam základních šablon obsahuje posuvníky, navigační lišty, ikony sociálních médií.

Velikost je nastavena hodnotami uvedenými v tabulce.

Rozložení mřížky

Dalším systémem, který si zaslouží pozornost, je rozvržení sítě. Je to množina protínajících se svislých a vodorovných čar. Formují sloupce a řádky. Prvky jsou umístěny v mřížce, jejich velikost je uvedena v řádcích a tabulkách. Lze použít fixní velikosti, jako je px, flexibilní - procenty, rem a em.

Nejprve je třeba deklarovat kontejner mřížky.

zobrazení: mřížka

Vlastnost mřížky-šablony-sloupce se používá k nastavení šířky řádků a pro sloupce se používá vlastnost řádků šablon. Dimenze mohou být zadány v jedné vlastnosti mřížky-šablony-sloupce. Šířka pásem se měří v jednotkách fr, což představuje zlomek dostupného prostoru v kontejneru. Je možné použít fx a px v jedné nemovitosti. Například šablony mřížky - sloupce: 500px 1fr 2fr.

Závěr

Celá praxe adaptivního uspořádání od A do Z zahrnuje použití maximálního počtu metod. Chcete-li od začátku rozkládat, jaké rozložení je pro všechna zařízení, musíte manuálně použít dotazy médií, vypočítat velikost obrázků a písma. Po získání příslušných dovedností můžete začít používat rámce.