Dalším faktorem, který vede k zaměření na mobilní design, je to, že většina lidí přistupuje k internetu prostřednictvím svých mobilních zařízení, což je 60 %. Zatímco pouze 20 % lidí používá internet na počítačích.
Tento článek se bude zabývat pokyny k vytvoření návrhu responzivního pro mobily.
Jak nastavit mobilní responzivní design?
Responzivní design, ať už se jedná o mobilní nebo pro větší obrazovky, lze vytvořit pomocí následujících metod:
- Vytvořte design responzivní pro mobily.
- Použijte/využívejte dotaz na média k vývoji/vytvoření responzivního designu pro větší obrazovky.
Metoda 1: Vytvořte návrh citlivý na mobily
Nejprve začněte s vytvořením přístupu k designu zaměřenému na mobily. Za tímto účelem postupujte podle pokynů uvedených níže.
Krok 1: Vytvořte strukturu HTML
Nejprve vytvořte strukturu HTML a přidejte „ Bootstrap “v
<žádné>
< 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 = '#' > Kontaktujte nás < / A < / že >
< / ul >
< / ne>
< / záhlaví>
< h1 > Vítejte v Linux Hint < / h1 >
< p > Webová stránka s návody. < / p >
< / sekce>
< / hlavní>
< p > Linux Tip Copyright < / p >
< / zápatí>
< / tělo >
Krok 2: Použijte CSS
V části těla nastavte „ rodina písem “ až “ sans serif “. Nastavte také výplň, okraj a barvu pozadí. Poté použijte CSS na záhlaví, zápatí a navigaci:
tělo {rodina písem : sans serif ;
okraj : 0 ;
vycpávka : 0 ;
barva pozadí : #808080 ;
}
záhlaví {
barva pozadí : nachový ;
barva : bílý ;
vycpávka : 8px ;
}
nav ul {
list-style-type : žádný ;
vycpávka : 0 ;
okraj : 0 ;
}
jejich loď {
okraj : 4px 0 ;
}
nav ul li a {
barva : bílý ;
text-dekorace : žádný ;
}
hlavní {
vycpávka : 18px ;
}
zápatí {
barva pozadí : růžový ;
barva : bílý ;
zarovnání textu : centrum ;
vycpávka : 8px ;
}
Jak lze pozorovat, níže uvedený výstup potvrdil, že design reaguje především na mobily:
Metoda 2: Použití dotazů na média k vytvoření responzivního návrhu pro větší obrazovky
Výše uvedený design lze také vytvořit pro větší obrazovky, jako jsou tablety a stolní počítače. Za tímto účelem musí uživatelé do CSS zahrnout dotaz na média. Šířka pro tablety je „ 786 pixelů “ a pro stolní počítače je „ 1024 pixelů “.
Chcete-li použít dotazy na média, nejprve zahrňte „ @media ” v souboru CSS. Poté zadejte vlastnost „min-width“ jako „ 768 pixelů “. To znamená, že kdykoli je splněna minimální velikost obrazovky „768 pixelů“ nebo vyšší, použije se následující CSS:
@media ( min-šířka : 768 pixelů ) {tělo {
velikost písma : 14px ;
}
záhlaví {
vycpávka : 18px ;
}
nav ul {
Zobrazit : flex ;
}
jejich loď {
okraj : 0 8px ;
}
hlavní {
Zobrazit : flex ;
ospravedlnit-obsah : prostor-mezi ;
zarovnat-položky : centrum ;
}
zápatí {
vycpávka : 18px ;
}
}
Níže uvedený výstup ukázal, že design reaguje i na větší obrazovky:
Závěr
Chcete-li nastavit design responzivní pro mobily, nejprve vytvořte strukturu HTML a přidejte výřez. Poté propojte soubor CSS ve značce head. Poté aplikujte CSS na základě responzivního designu zaměřeného na mobily. Kromě toho mohou uživatelé přidat dotaz na média CSS a upravit je na mobilním zařízení. Tento zápis demonstroval podrobný postup pro nastavení designu, který reaguje na mobilní zařízení.