Dette indlæg vil nævne de retningslinjer, der er nødvendige for at implementere medieforespørgsler.
Hvordan implementerer man medieforespørgsler til mobile enheder?
Medieforespørgslen kan anvendes på mobile enheder ved blot at nævne ' @medier ” tag og angive skærmstørrelsen i de små seler. CSS'en for den medieforespørgsel kan derefter tilføjes inden i de krøllede klammeparenteser. Når skærmstørrelsen opfylder den størrelse, der er angivet af brugeren, vil den anvende den angivne medieforespørgsel.
Lad os gennemgå et praktisk eksempel for at lære implementeringen af medieforespørgsler til mobile enheder.
Eksempel: Opret et layout, der ændres fra to-kolonne-layout til én kolonne-layout ved at anvende medieforespørgsler
I nedenstående eksempel vil layoutet af websiden ændre sig fra et kolonnelayout til et enkeltkolonnelayout:
Trin 1: Opret en HTML-struktur
- Først skal du oprette en HTML-fil og linke den eksterne CSS-stilarksfil i dens
afsnit. - Opret derefter en
og tilføj hjemmesidens overskrift ved hjælp af tag. - Lave en ved klassenavnet 'container-klasse' og to mereindeni har den klassenavnet ' kolonne ”. < legeme >
< h1 > Linux tip < / h1 >
< / overskrift>
< div klasse = 'container-klasse' >
< div klasse = 'kolonne' >
< h2 > Afsnit et < / h2 >
< s > Linux Hint er en af de bedste e-læringsplatforme. < / s >
< / div >
< div klasse = 'kolonne' >
< h2 > Afsnit to < / h2 >
< s > Linux Hint er en af de bedste e-læringsplatforme. < / s >
< / div >
< / div >
< / legeme >Trin 2: Anvend CSS
På kropssektionen:- Angiv først kropssektionen ved at skrive ' legeme ” tag og nævner de krøllede seler.
- Inde i klammeparenteserne skal du angive skrifttypefamilien, baggrundsfarven, margenen og polstringen.
På den
afsnit:
- Angiv tekstfarve, tekstjustering, baggrundsfarve og polstring.
På den 'container-klasse' div:
- Indstil ' Skærm ' ejendomsværdi til ' bøje ” for at oprette Flexbox.
- Brug ' retfærdiggøre-indhold ” for at tilføje mellemrum mellem indholdet og tilføje polstring.
På kolonneklasse:
- Angiv først den angivne værdi til ' bøje ” egenskab for at tilføje et mellemrum mellem de to layoutsektioner.
- Derefter skal du tilføje baggrundsfarve, kant, polstring og boksstørrelse.
Trin 3: Anvend Media Query
- For at anvende medieforespørgsel til mobile enheder skal du først tilføje ' @medier ” tag.
- Angiv derefter værdien ' 768 pixels ' som er typisk for mobile enheder til ' max-bredde ” ejendom indenfor de små seler.
- Derefter skal du angive ' kolonne ' værdi til ' flex-retning ' ejendom, der vil gælde for ' container-klasse” klasse. Dette vil ændre de to kolonner til én kolonne, når den angivne skærmstørrelse registreres.
- Til sidst skal du anvende CSS på ' kolonne ' klasse og angiv ' margen ' og ' bøje ' værdier:
font-familie: sans-serif;
baggrund- farve : sølv;
margin: 0 ;
polstring: 0 ;
}
header {
baggrund- farve : #2f4f4f;
polstring: 20px;
tekst- justere : center;
farve : hvid;
}
.beholder- klasse {
display: flex;
retfærdiggøre- indhold : mellemrum-mellem;
polstring: 20px;
}
.kolonne {
flex: 0 1 beregnet ( halvtreds % - 10 pixels ) ;
grænse : 1px fast grøn;
baggrund- farve : hvid;
box-sizing: border-box;
polstring: 20px;
}
@ medier ( max- bredde : 768 px ) {
.beholder- klasse {
flex-retning: kolonne;
}
.kolonne {
flex: 0 1 100 %;
margin-bund: 20px;
}
}Produktion
Her er output fra websiden efter anvendelse af medieforespørgsel. Dette output er et to-kolonne responsivt layout:
Når skærmen opfylder de angivne dimensioner ved hjælp af en medieforespørgsel til mobil, bliver den til et layout med én kolonne:
Konklusion
For at implementere medieforespørgsler til mobile enheder skal du først inkludere ' viewport ' i ' hoved ” afsnit. Skriv derefter mobildesignspecifik CSS. Derefter skal du tilføje medieforespørgslen ved at bruge '@media'-tagget og angive mobilskærmstørrelsen. Angiv f.eks. 768px for tablets og 480px for mobiltelefoner. Denne artikel har forklaret proceduren for implementering af medieforespørgsler til mobile enheder.