En anden faktor, der fører til fokus på mobile-first responsive design, er, at de fleste mennesker får adgang til internettet via deres mobile enheder, hvilket er 60 %. Mens kun 20% af befolkningen bruger internettet på desktops.
Denne artikel vil dække instruktionerne til at skabe det mobile-first responsive design.
Hvordan opsætter man Mobile-First Responsive Design?
Det responsive design, uanset om det er mobile-first responsive eller til større skærme, kan oprettes ved at følge nedenstående metoder:
- Skab et mobil-først responsivt design.
- Brug/udnyt medieforespørgslen til at udvikle/skabe et responsivt design til større skærme.
Metode 1: Opret et Mobile-First Responsive Design
Start først med at skabe den mobile-first design-tilgang. Til det formål skal du gennemgå de trinvise instruktioner nedenfor.
Trin 1: Opret en HTML-struktur
Først skal du oprette en HTML-struktur og tilføje en ' Bootstrap ” i
< ul >
< at >< -en href = '#' > Hjem < / -en >< / at >
< at >< -en href = '#' > Om os < / -en >< / at >
< at >< -en href = '#' > Vores tjenester < / -en >< / at >
< at >< -en href = '#' > Kontakt os < / -en >< / at >
< / ul >
< / nej >
< / overskrift>
< h1 > Velkommen til Linux-tip < / h1 >
< s > En tutorials hjemmeside. < / s >
< / sektion>
< / hoved>
< s > Linux-tip Copyright < / s >
< / sidefod>
< / legeme >
Trin 2: Anvend CSS
I kropssektionen skal du indstille ' skrifttype-familie ' til ' sans serif ”. Indstil også polstring, margen og baggrundsfarve. Anvend derefter CSS på sidehoved, sidefod og navigation:
legeme {skrifttype-familie : sans serif ;
margen : 0 ;
polstring : 0 ;
baggrundsfarve : #808080 ;
}
header {
baggrundsfarve : lilla ;
farve : hvid ;
polstring : 8px ;
}
nav ul {
liste-stil-type : ingen ;
polstring : 0 ;
margen : 0 ;
}
deres skib {
margen : 4px 0 ;
}
nav ul li a {
farve : hvid ;
tekst-dekoration : ingen ;
}
vigtigste {
polstring : 18 px ;
}
sidefod {
baggrundsfarve : lyserød ;
farve : hvid ;
tekstjustering : centrum ;
polstring : 8px ;
}
Som det kan ses, har nedenstående output bekræftet, at designet er mobil-først-responsivt:
Metode 2: Brug medieforespørgsler til at skabe responsivt design til større skærme
Ovenstående design kan også laves til større skærme som tablets og desktops. Til det formål skal brugere inkludere medieforespørgsler i CSS. Bredden for tablets er ' 786 pixels ' og for desktops er ' 1024px ”.
For at anvende medieforespørgslerne skal du først inkludere ' @medier ” tag i CSS-filen. Derefter skal du angive egenskaben 'min-width' som ' 768 pixels ”. Dette betyder, at når minimumsskærmstørrelsen '768px' eller derover er opfyldt, så vil følgende CSS gælde:
@medier ( min bredde : 768 pixels ) {legeme {
skriftstørrelse : 14 px ;
}
header {
polstring : 18 px ;
}
nav ul {
Skærm : bøje ;
}
deres skib {
margen : 0 8px ;
}
vigtigste {
Skærm : bøje ;
retfærdiggøre-indhold : mellemrum ;
align-elementer : centrum ;
}
sidefod {
polstring : 18 px ;
}
}
Nedenstående output viste, at designet også reagerer på større skærme:
Konklusion
For at opsætte et mobil-først responsivt design skal du først oprette en HTML-struktur og tilføje viewporten. Link derefter CSS-filen i head-tagget. Anvend derefter CSS baseret på mobil-først responsivt design. Desuden kan brugere tilføje CSS-medieforespørgslen for at justere på den mobile enhed. Denne opskrivning har demonstreret en detaljeret procedure til opsætning af et mobil-først responsivt design.