En annen faktor som fører til å fokusere på mobil-først responsiv design er at folk flest får tilgang til internett via sine mobile enheter, som er 60 %. Mens bare 20% av folk bruker internett på stasjonære datamaskiner.
Denne artikkelen vil dekke instruksjonene for å lage den mobile-first responsive designen.
Hvordan sette opp Mobile-First Responsive Design?
Den responsive designen, enten den er mobil-først-responsiv eller for større skjermer, kan lages ved å følge metodene gitt nedenfor:
- Lag en mobil-først responsiv design.
- Bruk/bruk mediespørringen til å utvikle/skape et responsivt design for større skjermer.
Metode 1: Lag en mobil-først responsiv design
Først, begynn med å lage den mobile-first design-tilnærmingen. For det formålet, gå gjennom de trinnvise instruksjonene nedenfor.
Trinn 1: Lag en HTML-struktur
Lag først en HTML-struktur og legg til en ' Støvelhempe 'i
< ul >
< at >< en href = '#' > Hjem < / en >< / at >
< at >< en href = '#' > Om oss < / en >< / at >
< at >< en href = '#' > Våre tjenester < / en >< / at >
< at >< en href = '#' > Kontakt oss < / en >< / at >
< / ul >
< / nei>
< / overskrift>
< h1 > Velkommen til Linux Hint < / h1 >
< s > En opplæringsside. < / s >
< / seksjon>
< / hoved>
< s > Linux-tips Copyright < / s >
< / bunntekst>
< / kropp >
Trinn 2: Bruk CSS
I kroppsdelen angir du ' font-familie ' til ' sans serif '. Angi også polstring, marg og bakgrunnsfarge. Bruk deretter CSS på topptekst, bunntekst og navigasjon:
kropp {font-familie : sans serif ;
margin : 0 ;
polstring : 0 ;
bakgrunnsfarge : #808080 ;
}
Overskrift {
bakgrunnsfarge : lilla ;
farge : hvit ;
polstring : 8 px ;
}
nav ul {
liste-stil-type : ingen ;
polstring : 0 ;
margin : 0 ;
}
skipet deres {
margin : 4px 0 ;
}
nav ul li a {
farge : hvit ;
tekst-dekorasjon : ingen ;
}
hoved- {
polstring : 18 piksler ;
}
bunntekst {
bakgrunnsfarge : rosa ;
farge : hvit ;
tekstjustering : senter ;
polstring : 8 px ;
}
Som det kan observeres, har utgangen nedenfor bekreftet at designet er mobil-først-responsivt:
Metode 2: Bruk mediesøk for å lage responsiv design for større skjermer
Designet ovenfor kan også lages for større skjermer som nettbrett og skrivebord. For det formålet må brukere inkludere mediesøk i CSS. Bredden for nettbrett er ' 786 piksler ' og for stasjonære datamaskiner er ' 1024 piksler '.
For å bruke mediespørringene må du først inkludere ' @media ”-taggen i CSS-filen. Etter det, spesifiser 'min-width'-egenskapen som ' 768 piksler '. Dette betyr at når minimumsskjermstørrelsen «768px» eller høyere er oppfylt, vil følgende CSS gjelde:
@media ( min bredde : 768 piksler ) {kropp {
skriftstørrelse : 14 piksler ;
}
Overskrift {
polstring : 18 piksler ;
}
nav ul {
vise : bøye seg ;
}
skipet deres {
margin : 0 8 px ;
}
hoved- {
vise : bøye seg ;
rettferdiggjøre-innhold : mellomrom ;
align-elementer : senter ;
}
bunntekst {
polstring : 18 piksler ;
}
}
Utgangen nedenfor viste at designet også er responsivt på større skjermer:
Konklusjon
For å sette opp en mobil-først responsiv design, må du først lage en HTML-struktur og legge til visningsporten. Koble deretter til CSS-filen i head-taggen. Bruk deretter CSS basert på mobil-først responsiv design. Videre kan brukere legge til CSS-mediespørringen for å justere på den mobile enheten. Denne oppskriften har demonstrert en detaljert prosedyre for å sette opp en mobil-først responsiv design.