Ďalším faktorom, ktorý vedie k zameraniu sa na mobilne responzívny dizajn, je to, že väčšina ľudí pristupuje na internet prostredníctvom svojich mobilných zariadení, čo je 60 %. Zatiaľ čo iba 20 % ľudí používa internet na stolných počítačoch.
Tento článok sa bude zaoberať pokynmi na vytvorenie dizajnu responzívneho pre mobilné zariadenia.
Ako nastaviť mobilný responzívny dizajn?
Responzívny dizajn, či už ide o mobilnú odpoveď alebo pre väčšie obrazovky, je možné vytvoriť nasledujúcimi spôsobmi:
- Vytvorte dizajn, ktorý reaguje na mobily.
- Použite/využite dopyt na médiá na vývoj/vytvorenie responzívneho dizajnu pre väčšie obrazovky.
Metóda 1: Vytvorte mobilný responzívny dizajn
Najprv začnite s vytvorením prístupu k dizajnu založenému na mobilnom zariadení. Na tento účel postupujte podľa pokynov uvedených nižšie.
Krok 1: Vytvorte štruktúru HTML
Najprv vytvorte štruktúru HTML a pridajte „ Bootstrap “v oddiele. Ak sa chcete dozvedieť o pridaní šablóny štýlov v sekcii HTML, kliknite na toto odkaz . Po vytvorení základnej štruktúry webu vrátane <žiadne> ,
<žiadne>
< ul >
< že < a href = '#' > Domov < / a < / že >
< že < a href = '#' > O nás < / a < / že >
< že < a href = '#' > Naše služby < / a < / že >
< že < a href = '#' > Kontaktuj nás < / a < / že >
< / ul >
< / nie>
< / hlavička>
< h1 > Vitajte v Linux Hint < / h1 >
< p > Webová stránka s návodmi. < / p >
< / sekcia>
< / hlavné>
< p > Linux Tip Copyright < / p >
< / päta>
< / telo >
Krok 2: Použite CSS
V časti tela nastavte „ font-family “ až “ sans serif “. Nastavte tiež výplň, okraj a farbu pozadia. Potom použite CSS na hlavičku, pätu a navigáciu:
telo {font-family : sans serif ;
marža : 0 ;
vypchávka : 0 ;
farba pozadia : #808080 ;
}
hlavička {
farba pozadia : Fialová ;
farba : biely ;
vypchávka : 8px ;
}
nav ul {
list-style-type : žiadny ;
vypchávka : 0 ;
marža : 0 ;
}
ich loď {
marža : 4px 0 ;
}
nav ul li a {
farba : biely ;
text-dekorácia : žiadny ;
}
Hlavná {
vypchávka : 18 pixelov ;
}
päta {
farba pozadia : Ružová ;
farba : biely ;
zarovnanie textu : stred ;
vypchávka : 8px ;
}
Ako je možné vidieť, výstup uvedený nižšie potvrdil, že dizajn reaguje predovšetkým na mobilné zariadenia:
Metóda 2: Použite mediálne dotazy na vytvorenie responzívneho dizajnu pre väčšie obrazovky
Vyššie uvedený dizajn je možné vytvoriť aj pre väčšie obrazovky, ako sú tablety a stolné počítače. Na tento účel musia používatelia zahrnúť dopyt na médiá do CSS. Šírka pre tablety je „ 786 pixelov “ a pre stolné počítače je „ 1024 pixelov “.
Ak chcete použiť mediálne dopyty, najprv zadajte „ @media ” v súbore CSS. Potom zadajte vlastnosť „min-width“ ako „ 768 pixelov “. To znamená, že vždy, keď je splnená minimálna veľkosť obrazovky „768 pixelov“ alebo viac, použije sa nasledujúci CSS:
@media ( min-šírka : 768 pixelov ) {telo {
veľkosť písma : 14 pixelov ;
}
hlavička {
vypchávka : 18 pixelov ;
}
nav ul {
displej : flex ;
}
ich loď {
marža : 0 8px ;
}
Hlavná {
displej : flex ;
ospravedlniť-obsah : priestor-medzi ;
align-items : stred ;
}
päta {
vypchávka : 18 pixelov ;
}
}
Nižšie uvedený výstup ukázal, že dizajn je citlivý aj na väčších obrazovkách:
Záver
Ak chcete nastaviť dizajn responzívny pre mobilné zariadenia, najprv vytvorte štruktúru HTML a pridajte výrez. Potom prepojte súbor CSS v značke head. Potom použite CSS na základe responzívneho dizajnu pre mobilné zariadenia. Okrem toho môžu používatelia pridať mediálny dopyt CSS a upraviť ho na mobilnom zariadení. Tento zápis demonštroval podrobný postup nastavenia dizajnu, ktorý reaguje na mobilné zariadenia.