Responzívne rozloženie mení dizajn stránky v závislosti od správania používateľa, platformy, veľkosti obrazovky a orientácie zariadenia a je neoddeliteľnou súčasťou moderného vývoja webu. Umožňuje výrazne ušetriť a nekresliť nový dizajn pre každé rozlíšenie, ale meniť veľkosť a umiestnenie jednotlivých prvkov.

Tento článok sa bude zaoberať hlavnými prvkami stránky a ich prispôsobením.

Úprava rozlíšenia obrazovky

V zásade môžete zariadenia rozdeliť do rôznych kategórií a vytvoriť pre každú z nich samostatne, ale zaberie to príliš veľa času a ktovie, aké štandardy budú o päť rokov? Navyše, podľa štatistík máme celý rad rôznych povolení:

Je zrejmé, že nebudeme môcť pokračovať v sádzaní pre každé zariadenie samostatne. Ale čo potom robiť?

Čiastočné riešenie: Urobiť všetko flexibilným

Samozrejme, nie je to ideálne, ale väčšinu problémov to eliminuje.

Ethan Marcotte vytvoril jednoduchú šablónu, ktorá demonštruje použitie flexu:

Na prvý pohľad sa môže zdať, že je všetko jednoduché, no nie je to tak. Pozrite si logo:

Ak zmenšíte celý obrázok, štítky budú nečitateľné. V záujme zachovania loga je preto obrázok rozdelený na dve časti: prvá časť (ilustrácia) je použitá ako pozadie, druhá (logo) proporcionálne mení veľkosť.

Element h1 obsahuje obrázok ako pozadie a obrázok je zarovnaný s pozadím kontajnera (hlavičky).

Flexibilné obrázky

Práca s obrázkami je jednou z najväčších výziev pri práci s responzívnym dizajnom. Existuje mnoho spôsobov, ako zmeniť veľkosť obrázkov, a väčšina z nich sa dá pomerne ľahko implementovať. Jedným z riešení je použitie maximálnej šírky v CSS:

Img (maximálna šírka: 100 %;)

Maximálna šírka obrázka je 100 % šírky obrazovky alebo okna prehliadača, takže čím menšia šírka, tým menší obrázok. Všimnite si, že max-width nie je podporovaný v IE, takže použite width: 100% .

Uvedená metóda je dobrou možnosťou na vytváranie responzívnych obrázkov, ale zmenou iba veľkosti ponecháme váhu obrázka rovnakú, čím sa predĺži doba načítania na mobilných zariadeniach.

Iný spôsob: Responzívne obrázky

Technika prezentovaná Filament Group nielenže mení veľkosť obrázkov, ale aj komprimuje rozlíšenie obrázkov na malých obrazovkách, aby sa urýchlilo načítanie.

Táto technika vyžaduje niekoľko súborov dostupných na Github. Najprv vezmite súbor JavaScript ( rwd-images.js), súbor .htaccess A rwd.gif(súbor s obrázkom). Potom použijeme nejaké HTML na prepojenie veľkých a malých rozlíšení: najprv malý obrázok s predponou .r(aby ste ukázali, že obrázok by mal byť responzívny), potom vytvorte odkaz na veľký obrázok pomocou data-fullsrc:

Pre každú obrazovku širšiu ako 480 px sa načíta obrázok s vyšším rozlíšením ( largeRes.jpg) a na malých obrazovkách sa načíta ( smallRes.jpg).

iPhone a iPod Touch majú funkciu: Dizajn vytvorený pre veľké obrazovky sa jednoducho zmenší v prehliadači s malým rozlíšením bez posúvania alebo ďalšieho rozloženia pre mobilné zariadenia. Obrázky a text však nebudú viditeľné:

Metaznačka sa používa na vyriešenie tohto problému:

Ak je počiatočná mierka rovná jednej, šírka obrázkov sa rovná šírke obrazovky.

Vlastná štruktúra rozloženia stránky

Pri výrazných zmenách veľkosti stránky možno budete musieť premiestniť prvky ako celok. Je vhodné to urobiť prostredníctvom samostatného súboru štýlov alebo efektívnejšie prostredníctvom dopytu na médiá CSS. Nemali by nastať žiadne problémy, pretože väčšina štýlov zostane rovnaká a zmení sa len niekoľko.

Napríklad máte hlavnú šablónu so štýlmi, ktorá definuje #wrapper , #content , #sidebar , #nav spolu s farbami, pozadím a typmi písma. Ak vaše hlavné štýly spôsobujú, že je rozloženie príliš úzke, krátke, široké alebo vysoké, môžete to zistiť a pridať nové štýly.

style.css (hlavný):

/* Hlavné štýly, ktoré sa majú zdediť podradenou šablónou štýlov */ html,body( pozadie... písmo... farba... ) h1,h2,h3() p, blockquote, pre, code, ol, ul( ) /* Štrukturálne prvky */ #wrapper( šírka: 80%; okraj: 0 auto; pozadie: #fff; padding: 20px; ) #content( šírka: 54%; float: left; margin-right: 3%; ) # sidebar-left( šírka: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )

mobile.css (dieťa):

#wrapper( šírka: 90%; ) #content( šírka: 100%; ) #sidebar-left( šírka: 100%; clear: both; /* Ďalší štýl pre nový dizajn */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Dodatočný štýl pre naše nové rozloženie */ border-top: 1px solid #ccc; margin-top: 20px; )

Na širokouhlej obrazovke ľavý a pravý bočný panel dobre sedia na boku. Na užších obrazovkách sú tieto bloky pre väčšie pohodlie umiestnené pod sebou.

Dopyty na médiá CSS3

Poďme sa pozrieť na to, ako sa dajú mediálne dotazy CSS3 použiť na vytvorenie responzívneho dizajnu. min-width určuje minimálnu šírku okna prehliadača alebo obrazovky, na ktorú sa použijú určité štýly. Ak je akákoľvek hodnota nižšia ako minimálna šírka, štýly sa budú ignorovať. max-width robí opak.

@media screen and (min-width: 600px) ( .hereIsMyClass (šírka: 30 %; float: right; ) )

Mediálny dopyt bude fungovať len vtedy, keď je minimálna šírka väčšia alebo rovná 600 pixelov.

@media screen and (max-width: 600px) ( .aClassforSmallScreens (clear: both; font-size: 1,3em; ) )

V tomto prípade trieda ( aTrieda pre malé obrazovky) bude fungovať, keď je šírka obrazovky menšia alebo rovná 600 pixelov.

Zatiaľ čo minimálna šírka a maximálna šírka sa môžu vzťahovať na šírku obrazovky aj na šírku okna prehliadača, možno budeme chcieť pracovať iba so šírkou zariadenia. Napríklad ignorovať prehliadače otvorené v malom okne. Na to môžete použiť min-device-width a max-device-width:

@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay (font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth (clear: both; margin-bottom) : 2px plné #ccc; ) )

Konkrétne pre iPad majú mediálne dopyty vlastnosť orientácia, ktorých hodnoty môžu byť buď krajina(horizontálne) resp portrét(vertikálne):

@media screen and (orientácia: na šírku) ( .iPadLandscape (šírka: 30 %; float: right; ) ) @media screen and (orientácia: na výšku) ( .iPadPortrait (jasné: oboje; ) )

Môžete tiež kombinovať hodnoty mediálnych dopytov:

@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )

Tento kód sa spustí iba na obrazovkách alebo oknách prehliadača so šírkou 800 až 1200 pixelov.

Môžete načítať konkrétny hárok so štýlmi pre rôzne hodnoty mediálnych dopytov, ako je tento:

JavaScript

Ak váš prehliadač nepodporuje dopyty na médiá CSS3, nahradenie štýlu môžete zariadiť pomocou jQuery:

Voliteľné zobrazenie obsahu

Možnosť zmenšiť a preusporiadať prvky tak, aby sa zmestili na malé obrazovky, je skvelá. Ale to nie je najlepšia možnosť. Pre mobilné zariadenia sa zvyčajne používa širší súbor zmien: zjednodušená navigácia, cielenejší obsah, zoznamy alebo riadky namiesto stĺpcov.

Tu je naše označenie:

Obsah ľavého bočného panela | Obsah pravého bočného panela

style.css (hlavný):

#content( šírka: 54%; float: left; margin-right: 3%; ) #sidebar-left( šírka: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )

mobile.css (zjednodušene):

#content( šírka: 100 %; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Ak sa veľkosť obrazovky zmenšuje, môžete napríklad použiť skript alebo alternatívnu šablónu so štýlmi na zväčšenie bieleho miesta alebo nahradiť navigáciu pre väčšie pohodlie. Vďaka možnosti skryť a zobraziť prvky, zmeniť veľkosť obrázkov, prvkov a oveľa viac môžete prispôsobiť dizajn akémukoľvek zariadeniu a obrazovke.

V poslednej dobe sa vyvíja čoraz viac technológií a rôznych zariadení (tablety, smartfóny, monitory), pomocou ktorých sa prezerajú webové stránky.

V sfére ktorej sa dostávame k obrovskému množstvu rôznych rozlíšení obrazovky, čo následne vedie k ťažkostiam pri získavaní informácií zo stránok. Aby boli informácie dobre čitateľné a pohodlne prezerané na väčšine zariadení, bola vyvinutá technológia adaptívneho dizajnu.

Cieľom responzívneho dizajnu je vyvinúť univerzálny dizajn webovej stránky, ktorý by zase umožnil prezeranie a interakciu so zdrojom z rôznych zariadení.

Táto technológia tiež zahŕňa vývoj jednej verzie webovej stránky pre všetky zariadenia a nie niekoľkých.

Responzívny web dizajn(angl. Adaptive Web Design) - dizajn webovej stránky, ktorý zabezpečuje správne zobrazenie stránky na rôznych zariadeniach pripojených k internetu a dynamicky sa prispôsobuje zadanej veľkosti okna prehliadača.

Základné princípy responzívneho dizajnu:

• Šablóna responzívnej webovej stránky, schopnosť šablóny prispôsobiť sa rôznym rozlíšeniam obrazovky zariadení od monitora počítača po smartfón;
• Prispôsobenie a pohyb blokov obsahu, schopnosť blokov obsahu v závislosti od rozlíšenia obrazovky zariadenia nadobudnúť požadované rozmery, ako aj schopnosť presunúť sa na inú pozíciu v rozložení;
• Úprava obrazu, schopnosť meniť veľkosť obrázkov v závislosti od rozlíšenia obrazovky alebo načítať prispôsobenejší obrázok s menšou hmotnosťou a veľkosťou;
• Použitie flexibilnej mriežky, umožňuje rýchlo zmeniť dizajn rozloženia;
• Skrytie menej dôležitých blokov, niektoré bloky môžu byť skryté na malých obrazovkách;
• Redizajn použiteľnosti navigačných prvkov, keďže na mobilných zariadeniach sa v dôsledku nízkeho rozlíšenia stávajú navigačné prvky menej klikateľné, sú prepracované, vďaka čomu sa pohodlne používajú;
• Zjednodušenie množstva prvkov na webovej stránke, niektoré prvky sú zjednodušené na použitie na mobilných zariadeniach;
• Úprava obsahu videa mala by sa brať do úvahy aj adaptácia videa;
• Používanie mediálnych dopytov(mediálny dotaz), umožňujú vytvoriť adaptívne rozloženie;
• Najskôr mobil(najprv mobil), navrhovanie responzívneho dizajnu začína rozložením pre mobilné zariadenia.

Pokiaľ ide o posledný bod, či je to správne alebo nie, je ťažká otázka, prinajmenšom mnohí tvrdia, že je potrebné začať s vývojom rozloženia od verzie pre mobilné zariadenia. Mám na to trochu iný názor, je pre mňa jednoduchšie vyvinúť rozloženie pre maximálne rozlíšenie s premyslenou mriežkou a plnou funkčnosťou a až potom ho prispôsobiť iným rozlíšeniam.

Veľkosti rozloženia responzívneho dizajnu

Pred časom v roku 2012 som napísal krátky článok o tom, ktoré z nich zvoliť pri vývoji dizajnu – pevné rozloženie stránky. Tento článok získal veľký záujem medzi čitateľmi, ukázalo sa, že táto otázka je zaujímavá pre mnohých začínajúcich dizajnérov a vývojárov. V tejto súvislosti som sa v tomto článku rozhodol poukázať aj na túto problematiku.

Čiže, čisto z mojej vízie, uvediem princíp a rozmery, pre ktoré by mala byť dispozícia vypracovaná.

Ak sa budete najskôr riadiť princípom mobilu, potom budú existovať také veľkosti rozlíšenia, pre ktoré musíte vyvinúť rozloženie 320px / 480px / 768px / 1024px / 1280px možno viac závisí od úlohy.

Obrázok vyzerá asi takto, ale často pri niektorých rozlíšeniach nie je potrebné vytvárať rozloženie, napríklad pod 480px. ak sa rozloženie nerozbije na medzere 768 – 320 pixelov.

Samozrejme, že plátno vytvoríme vo Photoshope, berúc do úvahy výplň, posuvník a všetko ostatné, rovnako ako bežné rozloženie. pre jednoduchosť vývoja, ako aj rýchlejší návrh rozloženia. Mnoho ľudí používa vo svojej práci frameworky, a preto sa spoliehajú na grid frameworku, na ktorom vyvíjajú.

Vďaka tomu budeme môcť návrhárovi rozloženia ukázať, ako sa bude rozloženie správať na rôznych rozlíšeniach obrazovky a zariadeniach. Napríklad som načrtol malé rozloženie, môžete ho vidieť na obrazovke nižšie.

Mediálny dopyt a zobrazovaná oblasť v responzívnom dizajne

Metaznačka zobrazovanej oblasti sa používa na informovanie prehliadača o tom, ako má zobraziť rozmery stránky a zmeniť jej mierku. Táto metaznačka je in stránky. Umožňuje vývojárom nastaviť šírku obrazovky pre zariadenia, ktorá je špecifikovaná v css.

Metaznačka zobrazenia je napísaná takto:

• šírka=šírka zariadenia- znamená, že šírka stránky lokality je nastavená tak, aby zodpovedala šírke obrazovky zariadenia.
• počiatočná mierka = 1,0- Tento atribút povie prehliadaču, aby nastavil mapovanie v mierke 1:1 pre pixely, čo znamená žiadne škálovanie.

Vľavo bez metaznačky, vpravo s metaznačkou zobrazovanej oblasti.

Pre meta tag je možné nastaviť aj ďalšie atribúty a parametre.

Dotazy na médiá

CSS3 hrá hlavnú úlohu pri vývoji responzívnych webových stránok. médiáotázky(dotazy na médiá). Mediálne dotazy zahŕňajú typ média (tlačiarne, smartfóny, obrazovky, televízory, projektory atď.) a stav, ktorý môže byť pravdivý alebo nepravdivý (pravda, nepravda). V závislosti od toho, či je typ média správny a či je splnená podmienka, sa použijú rôzne štýly css. Ak je to pravda, potom sa použijú štýly špecifikované v tomto mediálnom dotaze, ak je to nepravda, použijú sa normálne štýly css.

Vďaka takýmto požiadavkám vznikajú rôzne zobrazenia stránok pre mobily, tablety a obrazovky monitorov. Podporované všetkými modernými prehliadačmi.

Píše sa takto:

@media screen and (max-width: 1000px) ( .class ( property: value; ) )

• @media– mediálny dopyt;
• obrazovke– médium – typ (nazývaný aj typ média);
• maximálna šírka: 1 000 pixelov- podmienka, ktorá musí byť splnená (v našom prípade sa štýly použijú, ak je šírka okna menšia ako 1000px);
• . trieda– zapíšu sa zodpovedajúce selektory (triedy, id), v ktorých sa nastavia nové hodnoty pre vlastnosti.

Vo väčšine prípadov sa na vývoj responzívneho dizajnu používajú nasledujúce funkcie médií.

• max-width: šírka- znamená, že ak je šírka okna prehliadača menšia ako zadaná šírka, potom je podmienka splnená a použijú sa príslušné štýly (príklad: max-width: 768px, znamená, že ak je šírka okna prehliadača menšia ako 768px, potom štýly špecifikované v mediálnom dopyte).
• min-šírka: šírka- znamená, že ak je šírka okna prehliadača väčšia ako zadaná šírka, tak je podmienka splnená a aplikujú sa špecifikované štýly v požiadavke (príklad: min-width: 480px).

Ale dajú sa použiť aj iné funkcie: farba, šírka zariadenia, mriežka, výška, orientácia: na šírku, orientácia: na výšku, rozlíšenie a iné.

Hodnoty, ktoré sa používajú v mediálnych funkciách, sa tiež nazývajú zlomové body(body zlomu alebo kontrolné body). Na týchto kontrolných bodoch, uhádli ste, sa mení dizajn stránky.

• 320 pixelov- mobilné
• 480 pixelov- mobilné
• 768 pixelov- tablety
• 1024 pixelov- tablety, netbooky
• 1280 pixelov a ďalšie - osobné počítače.

Body zlomu nemusia byť striktne viazané na niektoré rozlíšenie obrazovky, pretože môžu byť vytvorené s inými parametrami v tých hodnotách, kde sa rozloženie viditeľne láme, nezobrazuje sa správne, prestáva sa správne zobrazovať.

Mediálne dotazy tiež používajú logické operátory, ako napríklad:

• a- logické AND, používané na spojenie viacerých podmienok (príklad: @media print a (color) ( ... )).
• nie– logické NIE, používa sa na negáciu podmienky (príklad: @media not all a (color) ( … )).
• iba– platí pre staršie prehliadače, ktoré nepodporujú mediálne dotazy (príklad: @media only screen a (max-width: 1300px) ( … )).

Mediálne dotazy sa zapisujú na koniec súboru štýlov, po všetkých hlavných štýloch css.

Ako urobiť responzívny webový dizajn z pevného layoutu

Povedzme teda, že máte fungujúcu tému webovej stránky s pevnou veľkosťou, ktorú by ste si chceli ponechať a urobiť z nej responzívne rozloženie, no neviete, kde začať. Ďalej vám poviem, ako sa to dá urobiť, či sa to dá vôbec urobiť a čo je potrebné urobiť, kde začať.

1. Najprv si pre každý prípad vytvoríme záložnú kópiu šablóny (témy).
2. Ďalej potrebujeme program na úpravu css, môže to byť ľubovoľný editor kódu, napríklad zátvorky od adobe, je zadarmo alebo Notepad ++.
3. Rovnako ako prehliadač google chrome s inšpektorom kódu (vyvolávaným klávesom F12).

Ďalej začnime upravovať, pre pohodlie môžete šablónu preniesť do Denveru (lokálny server) alebo do subdomény, podľa toho, čo je pre vás pohodlnejšie, aby používatelia nevideli všetky úpravy, ktoré sa vyskytnú v rozložení. V prvom rade pridajme metaznačku viewport, písal som o nej vyššie vo forme odporúčanej.
Ďalej musíme previesť všetky statické merné jednotky na relatívne meracie jednotky.

Toto sú px, musíte ich previesť na % a písma nastaviť na em. Týka sa to hlavne šírok a typov písma.

Šírka kontajnera hlavného obalu (max-width: 960px;) zostáva nezmenená, ak je šírka napísaná, zmeňte ju na max-width. U zvyšku nádob zmeníme šírku na pomer %. Preložíme podľa vzorca:

veľkosť nádoby (px) / veľkosť hlavného kontajnera (nadradený) v (px) * 100 % = výsledok (%)

Napríklad statický kontajner tela stránky je 720px, veľkosť hlavného kontajnera (jeho rodiča), napríklad štandardných 960px, potom dostaneme 720/960*100=75% .

Naše statické rozloženie teda prenesieme na gumu. Ďalej preložíme naše písma, ak sú in px v em Na tento účel opäť použijeme vzorec:

Veľkosť písma (px) / 16px (štandardná veľkosť) = veľkosť písma (em)

Veľkosť písma je napríklad 32px, potom 32/16=2em.
Potom prispôsobíme naše obrázky. Za týmto účelom napíšte nasledujúce vlastnosti a hodnoty v css.

Img( max-width:100%; height: auto; )

Táto metóda dobre prispôsobuje obrázky, len neznižuje hmotnosť obrázkov, čo znamená, že obrázky s veľkou hmotnosťou budú načítané na mobilné zariadenia. Aby ste tomu zabránili, je potrebné načítať rôzne obrázky v závislosti od veľkosti obrazovky.

Po vykonaní všetkých týchto zmien, ak ste urobili všetko správne, potom by sa na stránke nemalo nič zmeniť a ak sa pokúsite zmenšiť okná prehliadača, dizajn a obrázky by sa mali zmenšiť.

Teraz je náš základ pripravený, teraz musíte určiť kontrolné body, v ktorých sa bude rozloženie prestavovať, premýšľať o tom, ako sa budú bloky správať, čo budeme skrývať a napísať to všetko do mediálnych dopytov. Práve tieto zlomové body určíme pomocou prehliadača google chrome.

Otvorte v ňom naše rozloženie, stlačte kláves F12 a zmenšíme veľkosť okna prehliadača. V pravom hornom rohu napíšeme rozmery okna, nás zaujíma prvá hodnota, tá udáva šírku. Je potrebné komprimovať, kým sa dizajn prestane zobrazovať správne. V tejto veľkosti, keď rozloženie nevyzerá správne, vytvoríme kontrolný bod.
Po určení prvého bodu zlomu ho zapíšeme do súboru style.css úplne na koniec za všetky hlavné štýly. Povedzme, že naše rozloženie má ľavý bočný panel a obsahovú časť s oznámeniami a pri 910 pixeloch sa stránka začne zobrazovať nesprávne. V tomto prípade napíšeme nasledujúci mediálny dotaz.

@media only screen and (max-width: 910px)( /* obsahovú časť spravíme na celú šírku, zrušíme zarovnanie */ sekciu ( width: 100%; float: none; ) /* urobíme aj bočný panel na plnú šírku, zrušiť zarovnanie*/ na stranu (šírka: 100 %; plávajúca: žiadna; ) )

Ak tieto bloky majú nejaké okraje (okraj, výplň), mali by byť buď nastavené na nulu, alebo by sa mali zohľadniť pri písaní šírky. napr. výplň: 2% potom sa šírka zapíše nasledovne šírka: 96%.

Preto sme naše rozloženie prispôsobili na rozlíšenie menšie ako 910 pixelov. Ak je okno prehliadača menšie ako 910 pixelov, obsah sa zmení na celú šírku a bočný panel sa uvoľní pod obsahovou časťou a tiež nadobudne plnú šírku.

Rovnakým princípom vytvoríme zvyšok bodov prerušenia, nájdeme šírku, pri ktorej sa rozloženie zlomí (nevyzerá správne), napíšeme mediálny dotaz, nastavíme štýly formulára, nastavíme šírku blokov, môžeme skryť menej dôležité bloky ( displej: žiadny).

Ako vidíte, v tomto príklade nebudú body prerušenia pevne viazané na veľkosť obrazovky, čo zase zaručí dobré zobrazenie stránky na rôznych zariadeniach bez ohľadu na ich rozlíšenie.

Budete musieť tvrdo pracovať, ale výsledok vás nenechá čakať a budete môcť samostatne vytvoriť adaptívny dizajn webovej stránky z pevného rozloženia.

No, to je všetko, čo som chcel v tomto článku povedať, chcel som napísať trochu o adaptívnom dizajne, ale ukázalo sa, že je to dosť objemné, dúfam, že materiál bude pre vás užitočný.

Responzívny dizajn moderného webu je jedným z hlavných ukazovateľov jeho kvality.

Nie je žiadnym tajomstvom, že podiel využívania mobilných zariadení na prístup na internet neustále narastá. Tento trend je typický ako pre celý internet, tak najmä pre Runet.

A ak nechceme prísť o našich návštevníkov, čitateľov a potenciálnych kupcov, potom by ste sa mali postarať o to, aby sa vaša stránka správne a čitateľne odrážala v mobilných zariadeniach od tabletov až po smartfóny.

Okrem toho vyhľadávače hodnotia stránky prispôsobené pre mobilné zariadenia lojálnejšie. Platí to najmä pre Google PS, ktorý takéto požiadavky na stránky priamo kladie.

Čo je responzívny dizajn webu

Význam adaptívneho dizajnu je možnosť pohodlne prezerať a čítať materiály zverejnené na stránke na rôznych zariadeniach.

Hlavné kritériá na hodnotenie jednoduchosti pozerania sú:

1. vyhliadková oblasť.
2. Šírka obsahu.
3. Veľkosť písma, obrázkov, okien pre videá.
4. aktívnych prvkov.

Inými slovami, text by mal byť čitateľný, obrázky a videá by mali byť jasne viditeľné, položky ponuky a odkazy by mali byť viditeľné, prístupné a zrozumiteľné.

Ako dosiahnuť, aby bol váš web responzívny

Existuje niekoľko spôsobov, ako zabezpečiť, aby vaša stránka reagovala na zobrazenie na zariadeniach s rôznym rozlíšením obrazovky. Hlavné sú:

• Šablóna responzívnej webovej stránky.
• Mobilná verzia stránky.
• Inštalácia špeciálnej aplikácie do zariadenia používateľa.

Ako ukazujú skúsenosti, najoptimálnejším riešením je vytvorenie adaptívnej šablóny. Tento problém riešia aj dve ďalšie metódy, ktoré sú však výrazne horšie ako prvá metóda.

Pri používaní mobilnej verzie stránky je množstvo vynaloženej práce, peňazí a času porovnateľné s tvorbou a dolaďovaním adaptívnej šablóny.

Počas prevádzky sa však pridávajú akcie na udržanie relevantnosti mobilnej verzie stránky, na synchronizáciu informácií s hlavnou stránkou. Áno, a pre propagáciu SEO sa pridávajú ďalšie otázky s duplikátmi atď.

Výhody mobilnej verzie sú v tom, že sú odstránené všetky nepotrebné prvky, efekty, reklama, predplatné atď. Stránka sa nielen správne zobrazí na mobilných zariadeniach, ale sa aj čo najrýchlejšie načíta. To je jeho hlavná výhoda.
Takéto verzie si umožňujú veľké portály, stránky sociálnych sietí, veľké firemné stránky ...

Inštalácia aplikácie na mobilné zariadenia vôbec nezávisí od vás. Po prvé, nie každé zariadenie je možné nasadiť. Po druhé, vyžaduje si to ďalšie znalosti a činnosti a nie všetci používatelia budú súhlasiť s ďalšími problémami.

Takéto aplikácie si zvyčajne inštalujú používatelia, ktorí autorovi dôverujú a očakávajú od neho nové užitočné informácie. Je to niečo podobné ako pri odbere e-mailov.

Ak to zhrnieme, dospejeme k záveru: vytvorenie adaptívneho dizajnu pre vašu stránku bude najziskovejším riešením pre malú alebo strednú stránku.

Responzívne rozloženie stránky

Ak chcete vytvoriť adaptívny dizajn, budete sa musieť uchýliť k technológii adaptívneho rozloženia. Jeho podstata je nasledovná:
Urobte šablónu „gumou“

To znamená, neviazať sa pevne na šírku stránky, ale používať relatívne jednotky. To znamená, aby bola vaša šablóna proporcionálne stlačiteľná, teda „gumová“.

Na tento účel sa šírka stránky nastavuje vlastnosťou css max-width namiesto šírky a už vzhľadom na túto hodnotu sa šírka ostatných prvkov vyberá v percentách (%).

Definujte šírku obrazovky „body zlomu“

Pre plánovanie ďalších akcií je potrebné určiť kontrolné body (CT) šírky obrazovky.

Napríklad.
Maximálna šírka obrazovky je 1000 pixelov. Šírka obrazovky tabletu je 800 pixelov, šírka obrazovky smartfónu je 420 pixelov.

Tieto kontrolné body (CT) sa môžu líšiť pre rôzne typy lokalít. Niekedy stačí jeden, napríklad 600 pixelov, a kvalitu zobrazenia v nižších rozlíšeniach zabezpečuje „gumovosť“ šablóny.

Plánovanie rozloženia obrazovky pre každé CT

Podľa týchto kontrolných bodov usporiadajte umiestnenie jednotlivých blokov na stránke tak, aby sa správne zobrazovali na mobilných zariadeniach.

Aby ste to dosiahli, niektoré bloky, napríklad bočný panel, budú musieť byť umiestnené pod blokom hlavného obsahu a sekundárne bloky, ako sú reklamy, posúvače, úvodné obrazovky, môžu byť úplne opustené.

Pre viac informácií o riešení takýchto problémov sa môžete zoznámiť s bezplatným kurzom responzívneho dizajnu od tímu WebFormMySelf.

mediálne otázky

Ak chcete nastaviť body prerušenia, musíte použiť mediálne dotazy. Tieto smernice sú štandardy CSS3 na riadenie zobrazenia obsahu stránok lokality pre rôzne rozlíšenia obrazovky.
Táto smernica vyzerá takto:

@media only obrazovka a (maximálna šírka: 520px)( .art-Header-jpeg( výška: 80 %; zobrazenie: žiadne; ) .art-Logo( poloha: pevné; hore: 10px; ) .art-Logo-text( zobrazenie: žiadne; ) ...... ..... css výpisy ..... )

Responzívna šablóna blogu WordPress

Responzívnu šablónu pre svoj blog WordPress môžete poskytnúť niekoľkými spôsobmi.

1. Nainštalujte príslušný doplnok.
2. Kúpte si hotovú adaptívnu šablónu.
3. Prispôsobte si existujúcu šablónu svojpomocne alebo si objednajte službu od špecialistu.

Keďže som sa rozhodol ísť s dobou, začal som sa pripravovať aj na prispôsobenie môjho blogu. Na internete je veľa podrobných informácií o doplnkoch na prispôsobenie tém pre WP. Zoznámil som sa s prácou a požiadavkami populárnych pluginov a rozhodol som sa, že ich používanie nebude pre môj blog tým najlepším riešením.

Nákup modernej adaptívnej šablóny na internete je tiež celkom jednoduchý, ak by boli peniaze. Je ale potrebné, aby sa vám samotná šablóna páčila a spĺňala všetky vaše priania.

Stručne povedané, rozhodol som sa pre tretiu možnosť a rozhodol som sa prispôsobiť svoju šablónu sám.

Responzívna šablóna pre WordPress sami

Po oboznámení sa s princípmi prispôsobenia dizajnu pre mobilné zariadenia som sa veselo pustil do práce, no cítil som, že moje znalosti html, css, php nestačia.

A už som sa začal prikláňať k nákupu hotovej šablóny, ale v tom okamihu som dostal informácie o priebehu dvoch Andreev Bernatsky a Kudlai „WordPress-Master od osobného blogu k prémiovej šablóne“. Jeden z blokov tohto kurzu obsahoval lekcie o prispôsobení hotovej šablóny pre mobilné zariadenia.

Cena za kurz bola porovnateľná s cenou novej modernej adaptívnej šablóny. A túto sumu som sa rozhodol minúť na získanie kurzu a získať vedomosti namiesto hotovej šablóny. Myslím. Že investícia bola správna a plne opodstatnená.

Služba testovania rýchlosti webových stránok Google pre mobilné a stolné zariadenia - https://developers.google.com/speed/pagespeed/insights/
Tu sú uvedené odporúčania na opatrenia na urýchlenie načítania vašej stránky.

Chcel som stručne opísať niekoľko ďalších služieb. ale narazil som na rozumný podrobný článok a rozhodol som sa nenapínať, ale dať vám naň odkaz - http://habrahabr.ru/post/189726/.

Ak sa vám táto publikácia páčila, zdieľajte ju so svojimi priateľmi na sociálnych sieťach.
K článku môžete pridať svoje komentáre.

Používatelia internetu prehliadajú webové stránky na rôznych zariadeniach s rôznymi veľkosťami obrazovky. Veľkosti obrazoviek sa neustále menia, preto je dôležité, aby sa stránka prispôsobila ktorejkoľvek z nich. Existujú dva hlavné prístupy k vytváraniu webových stránok, ktoré sa dajú ľahko prispôsobiť rôznym typom zariadení:

Responzívny dizajn (RWD)- responzívny dizajn - navrhnutie stránky s určitými hodnotami vlastností, napríklad flexibilná mriežka rozloženia, ktorá umožňuje, aby jedno rozloženie fungovalo na rôznych zariadeniach;

Adaptívny dizajn (AWD)- adaptívny dizajn alebo dynamické zobrazenie - navrhnutie stránky s podmienkami, ktoré sa menia v závislosti od zariadenia, na základe niekoľkých rozložení s pevnou šírkou.

1. Responzívne dizajnové triky

Filozofiou responzívneho webdizajnu je, že stránku je možné jednoducho zobraziť na akomkoľvek zariadení bez ohľadu na veľkosť obrazovky. Fráza responzívny dizajn vynašiel Ethan Marcotte v roku 2011. Hlavnou črtou responzívneho webového dizajnu je, že vďaka pohyblivej (tekutej) mriežke rozloženie automaticky reaguje na zmeny veľkosti obrazovky, nafukuje sa alebo zmenšuje ako balón.

Responzívny dizajn(Angličtina) Responzívny webový dizajn) kombinuje tri metódy - flexibilné rozloženie založené na mriežke, flexibilné obrázky A mediálne otázky.

Flexibilita rozloženia je založený na použití relatívnych jednotiek namiesto pevných hodnôt pixelov, čo umožňuje prispôsobiť šírku podľa dostupného priestoru.

Flexibilita textového obsahu sa dosiahne výpočtom veľkostí písma vzhľadom na predvolenú veľkosť písma prehliadača 16px , napríklad pre pevnú veľkosť písma: 42px je relatívna veľkosť 42px / 16px = 2,625em .

Problém flexibilné obrázky vyriešené pomocou pravidla img (šírka: 100 %; maximálna šírka: 100 %;) pre všetky obrázky na stránke. Toto pravidlo zaisťuje, že obrázky nebudú nikdy širšie ako ich kontajnery a nikdy nepresiahnu ich skutočné rozmery na veľkých obrazovkách.

mediálne otázky upravovať štýly na základe charakteristík zariadenia súvisiacich so zobrazovaním obsahu vrátane typu obrazovky, šírky, výšky, orientácie a rozlíšenia obrazovky. Mediálne dotazy vytvárajú responzívny dizajn, ktorý aplikuje vhodné štýly na každú veľkosť obrazovky.

Ryža. 1. Responzívny dizajn

Viac citlivých dizajnových trikov

Škálovateľná vektorová grafika- Používajte obrázky svg, ktoré sa menia na ľubovoľnú veľkosť bez straty kvality a vyzerajú dobre na displejoch Retina.

Rozhrania kariet- používajte takzvané kartové rozhrania - obdĺžnikové tvary so zaoblenými rohmi, ktoré sú nádobami na obsah. Takéto bloky sú sebestačnými jednotkami rozhrania a dajú sa ľahko pohybovať po rozložení.

Ryža. 2. Rozloženie karty Pinterest

Nechajte len to najnutnejšie- dobrá technika, najmä pre responzívny dizajn. Vytvárajte responzívne a priateľské minimalistické rozhrania, ktoré si v súčasnosti získavajú čoraz väčšiu obľubu.

Ryža. 3. Vzhľad hotela, minimalizmus vo webdizajne

Správne stanovte priority a skryte obsah- používajte skryté ovládacie prvky, najmä pre zariadenia s malými obrazovkami. Vyskakovacie okná, karty, ponuky mimo plátna a ďalšie podobné triky môžu pomôcť znížiť počet prvkov na stránke. Uvoľnením miesta od nepotrebných prvkov urobíte rozhranie pohodlné a užívateľsky prívetivé.

Vytvorte veľký klikací priestor pre tlačidlá— čím väčšia je aktívna plocha tlačidla, tým je pre používateľa jednoduchšia interakcia s ním.

Pridajte interaktivitu do svojich rozhraní- v reakcii na akciu používateľa vytvorte akciu odozvy - animáciu, ktorá bude fungovať pri umiestnení kurzora myši nad prvok na stolných zariadeniach a pri dotyku prvku na mobilných zariadeniach.

2. Nastavenie výrezu pomocou metaznačky výrezu

Aby mobilné prehliadače pre operačné systémy Android a iOS automaticky nezmenili veľkosť stránok, používa sa špeciálna značka s atribútom name="viewport" . V tejto značke je povolené nastaviť špecifickú hodnotu pre parametre šírky a počiatočnej mierky:

- initial-scale=1 hovorí, že veľkosť stránky v prehliadači sa bude rovnať 100 % veľkosti zobrazovanej oblasti. To znamená, že pomer medzi fyzickým pixelom a pixelom css bude 1:1;

- width=device-width hovorí, že šírka stránky sa bude rovnať 100% šírky okna ľubovoľného prehliadača. To znamená, že šírka stránky webu zodpovedá šírke zariadenia, takže nie je potrebné meniť jej mierku.

V tomto príklade bude mať obsah v okne prehliadača dvojnásobok fyzickej veľkosti.

Tiež tag možno použiť na ovládanie toho, o koľko môžu používatelia zväčšiť alebo zmenšiť šírku stránky:

Tento kód zväčší šírku stránky na hodnotu rovnajúcu sa 3-násobku šírky obrazovky zariadenia a zmenší ju na polovicu šírky obrazovky zariadenia.

Používateľom môžete zabrániť v škálovaní pomocou atribútu user-scalable:

3. Univerzálne šablóny

Väčšina rozložení používaných na vytvorenie responzívneho webového dizajnu spadá do jednej z piatich kategórií vzorov definovaných Lukom Wroblewskim:
Väčšinou tekuté(Najviac gumové)
Pokles stĺpca(Stĺpce pod sebou),
Layout Shifter(Pohyblivé rozloženie),
Tiny Tweaks(malé zmeny)
z plátna(Vypnuté z obrazovky).
V niektorých prípadoch môže stránka používať kombináciu šablón, ako je Column Drop a Off Canvas.

3.1. Väčšinou tekuté

Populárne usporiadanie, zložené hlavne z gumenej sieťoviny. Na obrazovkách veľkej alebo strednej šírky zostáva jeho veľkosť zvyčajne nezmenená, na veľkých obrazovkách sa upravujú iba okraje. Na menších obrazovkách spôsobuje tekutá mriežka prepočítanie rozloženia pre hlavný obsah a stĺpce sú naskladané na seba. Výhodou vzoru je, že potrebuje iba jeden prerušovací bod medzi malými obrazovkami a veľkými obrazovkami.

3.2. Pokles stĺpca

Stĺpce sú umiestnené jeden po druhom vertikálne, ak šírka okna nemôže zobraziť celý obsah. V dôsledku toho budú stĺpce usporiadané vertikálne pod sebou. Výber bodov prerušenia pre túto šablónu rozloženia závisí od obsahu a určuje sa na základe návrhu.

3.3. Layout Shifter

Najcitlivejšia šablóna, pretože poskytuje viacero bodov prerušenia pre rôzne šírky obrazovky. Hlavným rozdielom tohto rozloženia je, že namiesto prepočítavania stromu vykresľovania a umiestňovania stĺpcov pod seba sa obsah presúva. Vzhľadom na výrazné rozdiely medzi hlavnými bodmi prerušenia je zachovanie tohto rozloženia skôr výzvou a je pravdepodobné, že sa bude musieť zmeniť nielen celkové rozloženie obsahu, ale aj jeho prvky.

3.4. Tiny Tweaks

Šablóna robí malé zmeny v rozložení, ako je úprava veľkosti písma, zmena veľkosti obrázkov alebo presúvanie obsahu. Funguje dobre na rozloženiach s jedným stĺpcom, ako sú napríklad jednostránkové weby a články s množstvom textu.

3.5. z plátna

Obsah, ktorý sa používa zriedka, ako sú navigačné prvky alebo ponuky aplikácií, je umiestnený mimo obrazovky a zobrazuje sa iba vtedy, keď to veľkosť obrazovky umožňuje. Na menších obrazovkách sa obsah otvorí jediným kliknutím.

4. Responzívny dizajn

Na rozdiel od responzívneho dizajnu, adaptívny dizajn(Adaptive Web Design) sa zameriava na veľkosti zariadení. Používa viacero statických rozložení pre rôzne typy zariadení (mobil, tablet, desktop) na základe bodov zlomu. To znamená, že rozloženia sa načítajú pri určitých veľkostiach okna prehliadača zariadenia a prechody medzi rozloženiami sú skokovité, nie plynulé.

Responzívne rozloženia majú zvyčajne šesť možností rozloženia na základe šírky obrazovky:
320
480
760
960
1200
1600.

Responzívne rozloženia sú predovšetkým o funkčnosti, čo znamená, že dizajn zohľadňuje vlastnosti zariadení, ako sú dotykové ovládanie pre mobilné zariadenia alebo veľké priestory pre stolné monitory.

Základné techniky responzívneho dizajnu

Držte sa postupnosti- každá stránka musí vytvoriť dôverný vzťah s používateľom, aby sa pri navigácii a interakcii s ním cítil pohodlne. Konzistentný dizajn znamená, že keď používateľ prejde na inú stránku webu, používateľ nemá pocit, že sa dostal na inú stránku. Venujte pozornosť malým detailom, vytvorte si vizuálnu hierarchiu, dôležité prvky zvýraznite tučným písmom. Použite konzistentnú farebnú schému na celom webe, znova použite rovnaké prvky pre rôzne situácie, ako napríklad rovnaký dizajn toastu.

Použite mriežku- 12-stĺpcová štruktúra je vhodnejšia na kontrolu šírky stĺpcov a zarážok medzi nimi.

5. Aký je rozdiel medzi responzívnym a responzívnym webdizajnom

Ryža. 4. Responzívny a adaptívny dizajn naprieč zariadeniami

Responzívne rozloženia sa vytvárajú pomocou mediálnych dopytov a relatívnych veľkostí položiek mriežky určených pomocou % . V responzívnom dizajne skripty na strane servera najskôr určia typ zariadenia, z ktorého sa používateľ pokúša pristupovať na stránku (počítač, telefón alebo tablet), a potom načítajú presnú verziu stránky, ktorá je pre nich najviac optimalizovaná. Prvky mriežky majú pevnú veľkosť pixelov.

Preto je hlavným rozdielom medzi týmito technikami responzívny dizajn – jedno rozloženie pre všetky zariadenia, adaptívny dizajn – jedno rozloženie pre každý typ zariadenia.

6. Užitočné služby a nástroje

Emulátor Androidu pre Windows, Linux a Mac OS X. Simulátor iOS je k dispozícii len pre používateľov Mac OS X a je súčasťou balíka Xcode (dostupný zadarmo z Mac App Store).

PHP skript, ktorý beží na ľubovoľnej webovej stránke, zistí veľkosť obrazovky a zmení veľkosť obrázka tak, aby sa s ňou zhodoval, čo má za následok malú veľkosť obrázka na malých obrazovkách.

Tabuľky zhody medzi fyzickými rozmermi zariadení a hodnotami CSS výšky a šírky, ako aj hodnotou pomeru pixelov pre mobilné zariadenia.

Zbierka webových stránok využívajúcich mediálne dopyty a responzívny webový dizajn.

Rámec CSS založený na 12 stĺpcoch, maximálne 960 pixelov. Podporované mobilnými prehliadačmi Chrome, Safari, Firefox, IE 7 a vyššie.

Sada nástrojov na vývoj webových aplikácií. Jazyk LESS, 12-stĺpcové responzívne rozloženie, podpora pre mobilné zariadenia, tablety a monitory, veľa komponentov, tlačidiel, rozbaľovacích ponúk, vlastný štýl vstupných polí, zoznamy, hlavičky, štítky, ikony, upozornenia, karty, indikátory priebehu, popisy , "akordeón", "kolotoč" a tak ďalej, rôzne pluginy Javascript, podpora Scaffolding vrátane aplikácie štýlu Bootstrap na už vytvorený HTML.

Zdravím vás, náhodní návštevníci a pravidelní čitatelia blogovej stránky!

Počas existencie tejto stránky som niekoľkokrát zmenil šablónu a dokonca som si od základu vytvoril vlastnú.
Jednou z hlavných úloh pri výbere novej šablóny je adaptívne rozloženie stránky pre všetky rozlíšenia obrazovky.

Stručný prehľad článku:

V predchádzajúcom článku som už písal o tom, prečo je to potrebné. Ako však dosiahnuť práve túto prispôsobivosť?

Existujú rôzne spôsoby, ako to urobiť. Niekto používa javascript, niekto niečo iné. Ale verím, že najjednoduchší a najsprávnejší spôsob je responzívny s CSS.

Ako vytvoriť responzívny vzhľad webu

po prvé, ak ste sa zaviazali vytvoriť adaptívny dizajn webovej stránky medzi značky vložte nasledujúci kód:

Aký som bol blázon, že som to neurobil hneď, keď som sa snažil vytvoriť adaptívne usporiadanie stránky!!!
Problémom mobilných prehliadačov je ich škálovanie rozloženia stránok, dokonca aj adaptívne.

Predstavte si, nakreslím návrh, potom napíšem všetky potrebné štýly a požiadavky, skontrolujem prispôsobivosť stránky pri rôznych rozlíšeniach. Všetko sa zdá byť dobré! Ale keď otvorím svoj blog na svojom smartfóne, vidím, že stránka sa jednoducho zmenšila. Neprispôsobil sa mobilnému zariadeniu, ale jednoducho zmenšil veľkosť písma, obrázkov atď.

Ako to? Začal som dvakrát kontrolovať všetky štýly, či som triedy napísal správne, v dôsledku toho som sa dostal do bodu, že som cez javascript skontroloval šírku okna prehliadača v px. Bol som šokovaný. Keď som to skontroloval na notebooku, dostal som výsledok 1024px a približne rovnaký výsledok som dostal aj pri otvorení stránky na smartfóne!

Ale toto nemôže byť!

Ukazuje sa, ak nenapíšete kód, ktorý som uviedol vyššie, mobilný prehliadač nerozumie, že stránka je prispôsobivá a snaží sa jednoducho zmenšiť stránku webu tak, aby sa zmestila na malú obrazovku mobilného telefónu.

Pre moju hlúposť a neschopnosť som stratil veľa času. Ale teraz si pamätám navždy))).

Responzívne dopyty médií CSS

Aby to bolo responzívne s CSS, musíte použiť mediálne dopyty.

Aké to je? Áno, veľmi jednoduché. V súbore CSS musíte napísať otázky ako:

@media obrazovka a (minimálna šírka: 1440 pixelov) a (maximálna šírka: 1599 pixelov) ( )

Tento kód znamená, že štýly uzavreté medzi „( ) “ budú fungovať pre obrazovky s minimálnou šírkou 1440px a maximálnou 1599px.

To znamená, že tie štýly prvkov lokality, ktoré by sa mali prispôsobiť v závislosti od rozlíšenia obrazovky, by sa mali písať samostatne pre každú možnú šírku obrazovky.

Najdôležitejšie rozlíšenia obrazovky pre responzívne rozloženie

• 320 pixelov- mobilné zariadenia (orientácia na výšku);
• 480 pixelov- mobilné zariadenia (orientácia na šírku);
• 600 pixelov- malé tablety;
• 768 pixelov- Tablety (orientácia na výšku);
• 1024 pixelov- Tablety (na šírku) / Netbooky;
• 1280px alebo viac- PC.

Práve na tieto povolenia sa musíte pri adaptívnom rozložení zamerať a venovať im osobitnú pozornosť. Toto sú najbežnejšie typy rozlíšení obrazovky.

bootstrap responzívny dizajn

Na vytvorenie adaptívneho rozloženia je veľmi výhodné použiť bootstrap. Výhodou je, že všetky štýly na prispôsobenie blokov, tlačidiel, tabuliek atď. už zaregistrovaný v bootstpap. Musíte len zistiť, ktorú triedu priradiť ku ktorému prvku.

Ak chcete začať, stiahnite si najnovšiu verziu bootstrapu a pripojte ju k svojej stránke. Upozorňujeme, že pripojenie štýlov a skriptov k wordpressu má svoje vlastné charakteristiky.

Rozloženie na bootstrape sa líši v tom, že šírka bloku alebo obrazovky je rozdelená na 12 rovnakých častí. A priradením určitej triedy k bloku môžete nastaviť šírku bloku na požadovaný počet častí.

Tento dizajn napríklad umožní jeden široký blok pre obsah so šírkou 8 častí a jeden úzky pre bočný panel so šírkou 4 častí obrazovky:

Šírka blokov sa vypočíta automaticky v závislosti od šírky obrazovky. A pri zobrazení na mobilnom zariadení sa tieto bloky budú posúvať pod seba.

Môžete tiež upraviť odsadenie bloku od okraja, opäť o požadovaný počet dielov. Napríklad táto konštrukcia:

Tým sa vytvorí blok, ktorý je široký 10 dielov, odsadený zľava o 1 časť obrazovky.

Ak na to prídete, potom práca s bootstrapom veľmi urýchli prácu. Navyše tieto štýly určite fungujú správne a na stránke nebude nič krivé.

V budúcnosti plánujem uverejniť nejaké návody na prácu s bootsrapom. Preto vám radím, aby ste tento moment nepremeškali.

Kontrola odozvy webu

Vynára sa však otázka: ako skontrolovať prispôsobivosť stránky? Tu máte napísané mediálne dotazy v CSS, pripojený bootstrap a použite potrebné triedy. A ako skontrolujete, či sa stránka správne prispôsobí všetkým rozlíšeniam obrazovky.

Veľmi presná a hlavne bezplatná služba, ktorá si zaslúži rešpekt a vďaku od webmasterov a dizajnérov layoutov, ktorí sa zaoberajú adaptívnym rozložením webových stránok.

Tak ako sa vám páči článok? Všetko jasné? Ak nie, napíšte do komentárov, spolu na to prídeme.

Áno, na vytvorenie responzívneho dizajnu webu musíte tvrdo pracovať. Ale tieto práce budú odmenené priaznivým prístupom k vašej stránke vyhľadávačov, a čo je najdôležitejšie, návštevníkom vašej stránky.