✅ Jak vytvořit responzivní rozvržení

Obsah

Požadavky
Vlastnosti min. šířka a max. šířka
Za použití Relativní polstrování

A citlivé rozložení se stal standardem ve webovém designu, tento typ rozvržení stránky znamená, že pokud okno, které jej obsahuje, náhle změní velikost, tj. z velmi velkého na velmi malé a naopak, naše prvky musí mít schopnost přeskupit, aby byla zachována slušný a funkční uživatelský zážitek.

To bylo vždy k dispozici s pravidly CSSPři poslední implementaci toho samého však byla přijata lepší opatření, částečně kvůli již existující moderní mobilní svět, který je jedním z velkých spotřebitelů designu reagující.

Ačkoli existuje několik rámců, jako je Bootstrap nebo Nadace které nám ve výchozím nastavení poskytují citlivé rozložení, nemůžeme na ně vždy záviset, proto je velmi užitečné vědět, jak můžeme rozložení těchto charakteristik vytvořit vlastními prostředky.

Požadavky

1- K dokončení tohoto tutoriálu budeme potřebovat základní znalosti HTML Y CSS, protože jsou životně důležité pro pochopení příkladů vytvořených v tutoriálu.

2- Po technické stránce požadujeme alespoň moderní prohlížeč jako Google Chrome, textový editor pro napsání našeho kódu, můžeme použít Vznešený text o NotePad ++ nebo dokonce poznámkový blok Windows nebo Gedit na Linuxu, pokud se cítíme dobrodružně.

3- Nakonec potřebujeme internetové připojení ke stažení obrázku nebo dvou, pokud jej chceme umístit do našeho kódu, jak uvidíme v jednom z ukázaných příkladů.

Vlastnosti min. šířka a max. šířka

Toto je možná první aspekt, se kterým se setkáváme při práci s prostředími reagující, protože se mnohokrát soustředíme na to, kdy se stránka zmenší, ale co nové obrazovky 4K? Proto nesmíme opomenout maximální rozlišení, pod kterým náš web vypadá slušně.

min. šířka a max. šířkaVlastnosti nebo atributy min. šířka Y maximální šířka CSS nám pomáhají v boji proti tomuto problému, protože nám umožňují stanovit maximální marže, pod kterými chceme, aby náš design byl reagující, protože pokud ne, extrémy ve velikostech na nás mohou hrát trik, zvláště v těchto chvílích, kdy se rozlišení stále zvyšují, ale ještě se nestanou masivními.

V následujícím příkladu předvedeme, jak můžeme regulovat naše rozložení díky zmíněným vlastnostem se chystáme vytvořit dokument HTML s následujícím obsahem:

Příklad responzivního rozvržení 1

Lorem ipsum dolor sit amet, consectetur adipiscing elite. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Alikvotní ultrafialové složky Phasellus varius ipsum non ligula v tiché bolesti. Aliquam ac nisl Vehicula.

To, co jsme udělali, je vytvořit tři prvky div, které fungují jako druh sloupců, takže v tomto případě říkáme jeho kontejnerovému prvku článek že jeho maximální šířka bude 1 200 pxTakže bez ohledu na to, jak velká je obrazovka, design odtamtud nikdy nevyroste, pak vytvoříme tři třídy, jednu pro každý div a jednu, kterou tímto způsobem přiřadíme minimální šířku, bez ohledu na to, jak moc je obrazovka zmenšená, vždy jde. udržovat to minimum proporcí, to je skvělé pro obrázky, jak uvidíme na obrázku v příkladu a nakonec ke třídě plovák také mu přiřadíme minimální šířku. Podívejme se, jak náš příklad vypadá v prohlížeči, když máme velké rozlišení:

ZVĚTŠIT

Nyní se podívejme, jak se to zmenšuje, když trochu zmenšíme okno prohlížeče:

ZVĚTŠIT

Nakonec se podívejme na výsledek, když nastavíme, aby okno mělo velikost podobnou velikosti mobilního telefonu:

Viděli jsme, jak byly zachovány proporce stanovené jako minimum a maximum, ale nejdůležitější je, že náš design byl přizpůsoben různým rozlišením, pomocí kterých jsme ho vizualizovali, a tímto způsobem jsme byli schopni zajistit, aby uživatel neztratil použitelnost v jejich zkušenostech s našimi stránkami.

Samozřejmě to zdaleka není něco, co by se mělo ukázat ve výrobě, ale dává nám to představu, kam bychom měli zaměřit část úsilí, když pracujeme na skutečných návrzích pro naše aplikace a stránky, zajímavé je, že sloupce byly upraveny tak, abychom mohli vidět, jak jsme přešli od rozložení se 3 sloupci k rozložení s jedním sloupcem.

Za použití Relativní polstrování

The polstrování Je to opatření, které nám umožňuje udržovat prostor obsahu na okrajích kontejneru, abychom stanovili hranici, jak daleko to půjde, nemělo by se to zaměňovat s okrajem, protože to je další koncept.

Jde o to, že polstrování se při vytváření a téměř nikdy nebere v úvahu rozložení být reagující výsledkem jsou texty a obsah, které později zůstávají neestetické při změně rozlišení, se kterým je design zobrazen.

V následujícím kódu umístíme a polstrování což funguje relativně, to znamená, že když se upraví velikost okna, naše polstrování Změní se tak, aby byly zachovány proporce, a tak bude obsah vždy zůstat tak, jak jsme jej uspořádali, přestože díky změně rozlišení bude mít méně místa. Podívejme se na náš příklad kódu:

Relativní polstrováníUdržujte proporce pomocí relativního polstrování

Lorem ipsum dolor sit amet, consectetur adipiscing elite. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Jak vidíme, definujeme vlastnosti polstrování každé třídy s procentuálními hodnotami namísto pevných hodnot s měřením v pixelech, tímto způsobem interpret stylu prohlížeče v prohlížeči poskytne měření, které jde podle hodnoty, kterou jsme umístili, na konci, když vidíme náš příklad v prohlížeči získáme následující:

ZVĚTŠIT

Pokud nyní zmenšíme velikost okna, uvidíme, jak se provede úprava, ale zachová se proporcionální vzdálenost od textu k okrajům:

Poté si všimneme, jak je náš design udržován, a brání deformaci snížením rozlišení osoby, která jej obsahuje, čímž udržujeme konzistentní zážitek pro naše uživatele.

Ačkoli existují pokročilejší koncepty, kterých se dotkneme v jiných tutoriálech, pomocí těchto pár triků nebo tipů se nám podaří dát našim starým webům nový život a mnohem více než vyhledávače jako Google Žádají nás o mobilní verzi, aby nám ve výsledcích mohli dát preference. Nejdůležitější pro dosažení skvělých výsledků je experimentovat a hodně cvičit, aby tato řešení přirozeně vycházela z naší mysli a nemuseli se neustále uchýlit k průvodcům.

Tímto tento tutoriál dokončíme, protože vidíme, že k dosažení výsledků nepotřebujeme žádný rámec reagující, a také nemusíme opustit kombinaci HTML + CSSJediná věc je, že pokud si musíme vybudovat vlastní nástroje, uspokojení z vylepšení našeho designu je velkou odměnou.