Čo je responzívny webový dizajn

• Smieť 19, 2024

Responzívny webový dizajn má tri hlavné črty, ktorými sú rozloženie tekutín, zmena veľkosti obrázkov a mediálne dotazy. Mediálne otázky nie sú v webdizajne tak nové. Začínali sme ako typy médií v CSS2.1, mohli sme navrhovať šablóny štýlov pre web aj tlač, čím sa trochu ubezpečilo, že webová stránka bude na obrazovke vyzerať rovnako aj pri tlači. To postúpilo do mediálnych dopytov v CSS3. Tento dotaz skontroluje šírku mediálneho zariadenia (maximálna šírka zariadenia) a otestuje ho oproti nastavenej hodnote, napríklad 480px alebo 768px. V odpovedi na tento dotaz používame štýly CSS na zmenu rozloženia tekutín a zmenu veľkosti obrázkov na obrazovke.

Môžete ľahko otestovať, či webová stránka má responzívny dizajn. Začnite prehliadačom v celej šírke obrazovky počítača. Potom potiahnite pravý okraj prehľadávača doľava, aby ste zmenšili šírku okna prehľadávača. Mali by ste vidieť, že sa obrázky zmenšujú a rozloženie zaberá plávajúce divy, ktoré sú vedľa seba, a ukladá ich zvisle. Napríklad, ak na stránke galérie na celej obrazovke máme šesť obrázkov (šesť dielikov) na riadok, ako zmenšujeme šírku obrazovky, počet obrázkov v riadku sa podľa potreby postupne zmenšuje a ukladá na seba. Keď sa šírka zmenší na určité množstvo, samotné obrázky začnú zmenšovať svoju veľkosť. Ak budete pozorne sledovať, uvidíte, že niektoré prvky dizajnu, ako napríklad navigačné odkazy, sa môžu zmenšiť na ikonu alebo dokonca zmiznúť. To je tiež riadené šablónou CSS.

Pri navrhovaní webových stránok zvážte nielen to, ako prvky dizajnu webovej stránky budú vyzerať na celej šírke obrazovky, ale ako budú vyzerať, keď sú naskladané. Zvážte, ktoré konštrukčné prvky môžu byť odstránené z obrazovky pri menšej šírke obrazovky bez toho, aby sa znížila funkčnosť webovej stránky. Pretože sa funkcie a technológie pre responzívny dizajn rýchlo menia, udržanie kroku so všetkými vylepšeniami môže byť časovo náročné. Ak by ste radšej trávili čas navrhovaním namiesto kódovania, pozrite si niektoré z krásnych responzívnych tém dostupných pre Wordpress. Ak ste malá dizajnérska firma, môžete pri navrhovaní webových stránok zvážiť začatie niektorého z týchto responzívnych rozložení tém.

Video Návody: Responsive 01: Úvod do responzívneho webdizajnu (Smieť 2024).