En annan faktor som leder till att fokusera på mobil-först responsiv design är att de flesta använder internet via sina mobila enheter, vilket är 60 %. Medan endast 20 % av människorna använder internet på stationära datorer.
Den här artikeln kommer att täcka instruktionerna för att skapa den mobila första responsiva designen.
Hur ställer jag in Mobile-First Responsive Design?
Den responsiva designen oavsett om den är mobil-först-responsiv eller för större skärmar kan skapas genom att följa metoderna nedan:
- Skapa en mobil-först responsiv design.
- Använd/använd mediefrågan för att utveckla/skapa en responsiv design för större skärmar.
Metod 1: Skapa en mobil-först responsiv design
Börja först med att skapa den mobila första designmetoden. För detta ändamål, gå igenom de stegvisa instruktionerna nedan.
Steg 1: Skapa en HTML-struktur
Skapa först en HTML-struktur och lägg till en ' Bootstrap ” i
< ul >
< den där >< a href = '#' > Hem < / a >< / den där >
< den där >< a href = '#' > Om oss < / a >< / den där >
< den där >< a href = '#' > Våra tjänster < / a >< / den där >
< den där >< a href = '#' > Kontakta oss < / a >< / den där >
< / ul >
< / nej>
< / header>
< h1 > Välkommen till Linux-tips < / h1 >
< sid > En tutorials webbplats. < / sid >
< / avsnitt>
< / huvud>
< sid > Linux-tips Copyright < / sid >
< / sidfot>
< / kropp >
Steg 2: Använd CSS
I kroppsdelen ställer du in ' typsnittsfamilj ' till ' sans serif ”. Ställ även in stoppning, marginal och bakgrundsfärg. Använd sedan CSS på sidhuvudet, sidfoten och navigeringen:
kropp {typsnittsfamilj : sans serif ;
marginal : 0 ;
stoppning : 0 ;
bakgrundsfärg : #808080 ;
}
rubrik {
bakgrundsfärg : lila ;
Färg : vit ;
stoppning : 8px ;
}
nav ul {
list-stil-typ : ingen ;
stoppning : 0 ;
marginal : 0 ;
}
deras skepp {
marginal : 4px 0 ;
}
nav ul li a {
Färg : vit ;
text-dekoration : ingen ;
}
huvud {
stoppning : 18px ;
}
sidfot {
bakgrundsfärg : rosa ;
Färg : vit ;
textjustera : Centrum ;
stoppning : 8px ;
}
Som kan observeras har utdata nedan bekräftat att designen är mobil-först-responsiv:
Metod 2: Använd mediafrågor för att skapa responsiv design för större skärmar
Ovanstående design kan även skapas för större skärmar som surfplattor och stationära datorer. För det ändamålet måste användare inkludera mediefråga i CSS. Bredden för surfplattor är ' 786 pixlar ' och för stationära datorer är ' 1024 pixlar ”.
För att tillämpa mediefrågorna, inkludera först ' @media ”-taggen i CSS-filen. Efter det, ange egenskapen 'min-width' som ' 768 pixlar ”. Detta innebär att när den minsta skärmstorleken '768px' eller högre uppfylls, kommer följande CSS att gälla:
@media ( min bredd : 768 pixlar ) {kropp {
textstorlek : 14px ;
}
rubrik {
stoppning : 18px ;
}
nav ul {
visa : böja ;
}
deras skepp {
marginal : 0 8px ;
}
huvud {
visa : böja ;
motivera-innehåll : mellanslag ;
align-objekt : Centrum ;
}
sidfot {
stoppning : 18px ;
}
}
Nedanstående utdata visade att designen också är lyhörd på större skärmar:
Slutsats
För att skapa en mobil-först responsiv design, skapa först en HTML-struktur och lägg till visningsporten. Länka sedan CSS-filen i head-taggen. Använd sedan CSS baserat på mobil-först responsiv design. Dessutom kan användare lägga till CSS-mediefrågan för att justera på den mobila enheten. Denna uppskrivning har visat en detaljerad procedur för att skapa en mobil-först responsiv design.