Dette innlegget vil nevne retningslinjene som er nødvendige for å implementere medieforespørsler.
Hvordan implementere medieforespørsler for mobile enheter?
Mediespørringen kan brukes på mobile enheter ved ganske enkelt å nevne ' @media ” tag og spesifisere skjermstørrelsen i de små klammeparentesene. CSS-en for den mediespørringen kan deretter legges til i de krøllede klammeparentesene. Når skjermstørrelsen oppfyller størrelsen spesifisert av brukeren, vil den bruke den angitte mediespørringen.
La oss se på et praktisk eksempel for å lære implementeringen av medieforespørsler for mobile enheter.
Eksempel: Lag en layout som endres fra to-kolonne-oppsett til én kolonne-oppsett ved å bruke mediesøk
I eksemplet nedenfor vil oppsettet til nettsiden endres fra et kolonneoppsett til et enkeltkolonneoppsett:
Trinn 1: Lag en HTML-struktur
- Først oppretter du en HTML-fil og kobler den eksterne CSS-stilarkfilen til den
seksjon. - Deretter oppretter du en
og legg til nettsidens overskrift ved å bruke stikkord. - Lage en ved klassenavnet 'container-class' og to andreinne har den klassenavnet ' kolonne '. < kropp >
< h1 > Linux hint < / h1 >
< / overskrift>
< div klasse = 'container-klasse' >
< div klasse = 'kolonne' >
< h2 > Seksjon én < / h2 >
< s > Linux Hint er en av de beste e-læringsplattformene. < / s >
< / div >
< div klasse = 'kolonne' >
< h2 > Del to < / h2 >
< s > Linux Hint er en av de beste e-læringsplattformene. < / s >
< / div >
< / div >
< / kropp >Trinn 2: Bruk CSS
På kroppsdelen:- Først spesifiser kroppsdelen ved å skrive ' kropp ” tag og nevner de krøllete tannreguleringene.
- Inne i klammeparentesene, spesifiser skriftfamilien, bakgrunnsfargen, margen og polstring.
På
seksjon:
- Angi tekstfarge, tekstjustering, bakgrunnsfarge og utfylling.
På 'container-klasse' div:
- Sett ' vise ' eiendomsverdi til ' bøye seg ' for å lage Flexbox.
- Bruke ' rettferdiggjøre-innhold ” for å legge til mellomrom mellom innholdet og legge til utfylling.
På kolonneklassen:
- Først spesifiser den angitte verdien til ' bøye seg ” egenskap for å legge til et mellomrom mellom de to layoutdelene.
- Etter det legger du til bakgrunnsfarge, kantlinje, polstring og boksstørrelse.
Trinn 3: Bruk Media Query
- For å bruke mediesøk for mobile enheter, legg først til ' @media ' stikkord.
- Deretter spesifiser verdien ' 768 piksler ' som er typisk for mobile enheter til ' maks bredde ” eiendom innenfor de små seler.
- Etter det, spesifiser ' kolonne 'verdi til ' flex-retning ' eiendom som vil gjelde for ' container-klasse'. Dette vil endre de to kolonnene til én kolonne når den angitte skjermstørrelsen oppdages.
- Til slutt, bruk CSS på ' kolonne ' klasse og spesifiser ' margin ' og ' bøye seg ' verdier:
font-familie: sans-serif;
bakgrunn- farge : sølv;
margin: 0 ;
polstring: 0 ;
}
Overskrift {
bakgrunn- farge : #2f4f4f;
polstring: 20px;
tekst- tilpasse : senter;
farge : hvit;
}
.container- klasse {
display: flex;
rettferdiggjøre- innhold : mellomrom;
polstring: 20px;
}
.kolonne {
flex: 0 1 beregnet ( femti % - 10 piksler ) ;
grense : 1px solid grønn;
bakgrunn- farge : hvit;
boksstørrelse: border-box;
polstring: 20px;
}
@ media ( maks- bredde : 768 piksler ) {
.container- klasse {
flex-retning: kolonne;
}
.kolonne {
flex: 0 1 100 %;
marg-bunn: 20px;
}
}Produksjon
Her er utdataene fra nettsiden etter bruk av mediesøk. Denne utgangen er en responsiv layout med to kolonner:
Når skjermen oppfyller de spesifiserte dimensjonene ved å bruke en medieforespørsel for mobil, blir den til en én-kolonne layout:
Konklusjon
For å implementere mediespørringer for mobile enheter, inkluderer du først ' viewport ' i ' hode ' seksjon. Skriv deretter mobildesignspesifikk CSS. Deretter legger du til mediesøket ved å bruke «@media»-taggen og spesifisere mobilskjermstørrelsen. Angi for eksempel 768px for nettbrett og 480px for mobiltelefoner. Denne artikkelen har forklart prosedyren for implementering av mediespørringer for mobile enheter.