Babanggitin ng post na ito ang mga alituntuning kailangan para ipatupad ang mga query sa media.
Paano Magpapatupad ng Mga Media Query para sa Mga Mobile Device?
Ang media query ay maaaring ilapat sa mga mobile device sa pamamagitan lamang ng pagbanggit sa ' @media ” tag at pagtukoy ng laki ng screen sa maliliit na braces. Ang CSS para sa query ng media na iyon ay maaaring idagdag sa loob ng mga kulot na brace. Sa tuwing natutugunan ng laki ng screen ang laki na tinukoy ng user, ilalapat nito ang nakasaad na query sa media.
Tingnan natin ang isang praktikal na halimbawa para matutunan ang pagpapatupad ng mga query sa media para sa mga mobile device.
Halimbawa: Gumawa ng Layout na Nagbabago mula sa Dalawang Layout ng Column patungo sa Isang Layout ng Column sa pamamagitan ng Paglalapat ng Mga Query sa Media
Sa halimbawa sa ibaba, ang layout ng web page ay magbabago mula sa isang column layout patungo sa isang solong-column na layout:
Hakbang 1: Gumawa ng HTML Structure
- Una, gumawa ng HTML file at i-link ang external na CSS stylesheet file sa loob nito
seksyon. - Pagkatapos, lumikha ng isang
seksyon at idagdag ang heading ng website gamit ang tag. - Gumawa ng sa pamamagitan ng pangalan ng klase ng 'klase ng lalagyan' at dalawa pangsa loob nito ay may pangalan ng klase na ' hanay ”. < katawan >
< h1 > Hint sa Linux < / h1 >
< / header>
< div klase = 'klase ng lalagyan' >
< div klase = 'haligi' >
< h2 > Unang Seksyon < / h2 >
< p > Ang Linux Hint ay isa sa pinakamahusay na e-learning platform. < / p >
< / div >
< div klase = 'haligi' >
< h2 > Ikalawang Seksyon < / h2 >
< p > Ang Linux Hint ay isa sa pinakamahusay na e-learning platform. < / p >
< / div >
< / div >
< / katawan >Hakbang 2: Ilapat ang CSS
Sa seksyon ng katawan:- Una, tukuyin ang seksyon ng katawan sa pamamagitan ng pagsulat ng “ katawan ” tag at binanggit ang curly braces.
- Sa loob ng mga braces, tukuyin ang pamilya ng font, kulay ng background, margin, at padding.
Sa
seksyon:
- Tukuyin ang kulay ng teksto, pagkakahanay ng teksto, kulay ng background, at padding.
Sa 'klase ng lalagyan' div:
- Itakda ang ' display 'halaga ng ari-arian sa ' baluktot ” para gawin ang Flexbox.
- Gamitin ang ' justify-content ” upang magdagdag ng espasyo sa pagitan ng nilalaman at magdagdag ng padding.
Sa klase ng column:
- Una, tukuyin ang nakasaad na halaga sa ' baluktot ” property upang magdagdag ng espasyo sa pagitan ng dalawang seksyon ng layout.
- Pagkatapos nito, idagdag ang kulay ng background, border, padding, at box-sizing.
Hakbang 3: Ilapat ang Media Query
- Upang ilapat ang query sa media para sa mga mobile device, idagdag muna ang ' @media ” tag.
- Pagkatapos, tukuyin ang halaga ' 768px ” na karaniwan para sa mga mobile device sa “ max-width ” property sa loob ng maliliit na braces.
- Pagkatapos nito, tukuyin ang ' hanay 'halaga sa' pagbaluktot-direksyon ” ari-arian na ilalapat sa “ lalagyan-klase” klase. Papalitan nito ang dalawang column sa isang column sa tuwing matutukoy ang tinukoy na laki ng screen.
- Panghuli, ilapat ang CSS sa “ hanay 'klase at tukuyin' margin 'at' baluktot ” mga halaga:
font-family: sans-serif;
background- kulay : pilak;
margin: 0 ;
padding: 0 ;
}
header {
background- kulay : #2f4f4f;
padding: 20px;
text- ihanay : gitna;
kulay : puti;
}
.lalagyan- klase {
display: flex;
bigyang-katwiran- nilalaman : espasyo-pagitan;
padding: 20px;
}
.column {
ibaluktot: 0 1 calc ( limampu % - 10px ) ;
hangganan : 1px solidong berde;
background- kulay : puti;
box-sizing: hangganan-kahon;
padding: 20px;
}
@ media ( max- lapad : 768px ) {
.lalagyan- klase {
flex-direction: column;
}
.column {
ibaluktot: 0 1 100 %;
margin-bottom: 20px;
}
}Output
Narito ang output ng web page pagkatapos mag-apply ng media query. Ang output na ito ay isang dalawang-column na tumutugon na layout:
Sa tuwing natutugunan ng screen ang mga tinukoy na dimensyon gamit ang isang media query para sa mobile, ito ay nagiging isang layout ng isang column:
Konklusyon
Upang ipatupad ang mga query sa media para sa mga mobile device, isama muna ang ' viewport ' nasa ' ulo ” seksyon. Pagkatapos, sumulat ng CSS na partikular sa disenyo ng mobile. Pagkatapos nito, idagdag ang media query sa pamamagitan ng paggamit ng tag na “@media” at pagtukoy sa laki ng screen ng mobile. Halimbawa, tukuyin ang 768px para sa mga tablet at 480px para sa mga mobile phone. Ipinaliwanag ng artikulong ito ang pamamaraan para sa pagpapatupad ng mga query sa media para sa mga mobile device.