Ang isa pang salik na humahantong sa pagtuon sa mobile-first responsive na disenyo ay ang karamihan sa mga tao ay nag-a-access sa internet sa pamamagitan ng kanilang mga mobile device, na 60%. Habang 20% lamang ng mga tao ang gumagamit ng internet sa mga desktop.
Sasaklawin ng artikulong ito ang mga tagubilin para gawin ang mobile-first responsive na disenyo.
Paano Mag-set Up ng Mobile-First Responsive Design?
Ang tumutugon na disenyo kung ito ay mobile-unang tumutugon o para sa mas malalaking screen ay maaaring gawin sa pamamagitan ng pagsunod sa mga pamamaraan na ibinigay sa ibaba:
- Gumawa ng mobile-first responsive na disenyo.
- Gamitin/gamitin ang media query para bumuo/gumawa ng tumutugon na disenyo para sa mas malalaking screen.
Paraan 1: Gumawa ng Mobile-First Responsive Design
Una, magsimula sa paggawa ng mobile-first design approach. Para sa layuning iyon, dumaan sa sunud-sunod na mga tagubilin na ibinigay sa ibaba.
Hakbang 1: Gumawa ng HTML Structure
Una, gumawa ng HTML structure at magdagdag ng “ Bootstrap ' nasa
< ul >
< na >< a href = '#' > Bahay < / a >< / na >
< na >< a href = '#' > Tungkol sa atin < / a >< / na >
< na >< a href = '#' > ang aming serbisyo < / a >< / na >
< na >< a href = '#' > Makipag-ugnayan sa amin < / a >< / na >
< / ul >
< / hindi>
< / header>
< h1 > Maligayang pagdating sa Linux Hint < / h1 >
< p > Isang website ng tutorial. < / p >
< / seksyon>
< / pangunahing>
< p > Copyright ng Linux Hint < / p >
< / footer>
< / katawan >
Hakbang 2: Ilapat ang CSS
Sa seksyon ng katawan, itakda ang ' font-family 'sa' sans serif ”. Itakda din ang padding, margin, at kulay ng background. Pagkatapos noon, ilapat ang CSS sa header, footer, at navigation:
katawan {font-family : sans serif ;
margin : 0 ;
padding : 0 ;
kulay ng background : #808080 ;
}
header {
kulay ng background : lila ;
kulay : puti ;
padding : 8px ;
}
nav ul {
list-style-type : wala ;
padding : 0 ;
margin : 0 ;
}
kanilang barko {
margin : 4px 0 ;
}
nav ul li a {
kulay : puti ;
text-dekorasyon : wala ;
}
pangunahing {
padding : 18px ;
}
footer {
kulay ng background : kulay rosas ;
kulay : puti ;
text-align : gitna ;
padding : 8px ;
}
Gaya ng mapapansin, ang output sa ibaba ay nakumpirma na ang disenyo ay mobile-first tumutugon:
Paraan 2: Gumamit ng Mga Query sa Media para Gumawa ng Tumutugon na Disenyo para sa Mas Malaking Screen
Ang disenyo sa itaas ay maaari ding gawin para sa mas malalaking screen gaya ng mga tablet at desktop. Para sa layuning iyon, kailangang isama ng mga user ang media query sa CSS. Ang lapad para sa mga tablet ay ' 786px 'at para sa mga desktop ay ' 1024px ”.
Upang ilapat ang mga query sa media, isama muna ang ' @media ” tag sa CSS file. Pagkatapos nito, tukuyin ang property na 'min-width' bilang ' 768px ”. Nangangahulugan ito na sa tuwing natutugunan ang pinakamababang laki ng screen na “768px” o mas mataas, ilalapat ang sumusunod na CSS:
@media ( min-lapad : 768px ) {katawan {
laki ng font : 14px ;
}
header {
padding : 18px ;
}
nav ul {
display : baluktot ;
}
kanilang barko {
margin : 0 8px ;
}
pangunahing {
display : baluktot ;
katwiran-nilalaman : espasyo-pagitan ;
align-item : gitna ;
}
footer {
padding : 18px ;
}
}
Ang output sa ibaba ay nagpakita na ang disenyo ay tumutugon din sa mas malalaking screen:
Konklusyon
Para mag-set up ng mobile-first responsive na disenyo, gumawa muna ng HTML structure at idagdag ang viewport. Pagkatapos ay i-link ang CSS file sa head tag. Pagkatapos, ilapat ang CSS batay sa mobile-first responsive na disenyo. Higit pa rito, maaaring idagdag ng mga user ang CSS media query upang ayusin sa mobile device. Ang write-up na ito ay nagpakita ng isang detalyadong pamamaraan para mag-set up ng mobile-first responsive na disenyo.