Det här inlägget kommer att nämna de riktlinjer som krävs för att implementera mediefrågor.
Hur implementerar man mediefrågor för mobila enheter?
Mediefrågan kan appliceras på mobila enheter genom att helt enkelt nämna ' @media ” tagga och ange skärmstorleken i de små hängslen. CSS för den mediefrågan kan sedan läggas till i de lockiga klammerparenteserna. Närhelst skärmstorleken motsvarar storleken som specificerats av användaren kommer den att tillämpa den angivna mediefrågan.
Låt oss överblicka ett praktiskt exempel för att lära oss implementeringen av mediefrågor för mobila enheter.
Exempel: Skapa en layout som ändras från layout med två kolumner till layout för en kolumn genom att använda mediefrågor
I exemplet nedan kommer webbsidans layout att ändras från en kolumnlayout till en enkolumnlayout:
Steg 1: Skapa en HTML-struktur
- Skapa först en HTML-fil och länka den externa CSS-stilmallsfilen i dess
sektion. - Skapa sedan en
sektionen och lägg till webbplatsens rubrik med hjälp av märka. - Skapa en med klassnamnet 'container-class' och ytterligare tvåinuti den har klassnamnet ' kolumn ”. < kropp >
< h1 > Linux tips < / h1 >
< / header>
< div klass = 'container-klass' >
< div klass = 'kolumn' >
< h2 > Avsnitt ett < / h2 >
< sid > Linux Hint är en av de bästa e-lärande plattformarna. < / sid >
< / div >
< div klass = 'kolumn' >
< h2 > Avsnitt två < / h2 >
< sid > Linux Hint är en av de bästa e-lärande plattformarna. < / sid >
< / div >
< / div >
< / kropp >Steg 2: Använd CSS
På kroppssektionen:- Ange först huvuddelen genom att skriva ' kropp ” tagga och nämna de lockiga hängslen.
- Inuti hängslen anger du teckensnittsfamilj, bakgrundsfärg, marginal och stoppning.
På
sektion:
- Ange textfärg, textjustering, bakgrundsfärg och utfyllnad.
På 'containerklass' div:
- Ställ in ' visa ' egenskapens värde till ' böja ” för att skapa Flexbox.
- Använd ' motivera-innehåll ” för att lägga till mellanrum mellan innehållet och lägga till utfyllnad.
På kolumnklass:
- Ange först det angivna värdet till ' böja ” för att lägga till ett mellanslag mellan de två layoutsektionerna.
- Efter det lägger du till bakgrundsfärg, ram, stoppning och lådans storlek.
Steg 3: Använd Media Query
- För att tillämpa mediefråga för mobila enheter, lägg först till ' @media '-tagg.
- Ange sedan värdet ' 768 pixlar ” vilket är typiskt för mobila enheter till ” maximal bredd ” egendom inom de små hängslen.
- Efter det, ange ' kolumn ' värde till ' flex-riktning ' egendom som kommer att gälla för ' containerklass”. Detta kommer att ändra de två kolumnerna till en kolumn närhelst den angivna skärmstorleken upptäcks.
- Till sist, tillämpa CSS på ' kolumn ' klass och ange ' marginal ' och ' böja ' värden:
teckensnittsfamilj: sans-serif;
bakgrund- Färg : silver;
marginal: 0 ;
stoppning: 0 ;
}
rubrik {
bakgrund- Färg : #2f4f4f;
stoppning: 20px;
text- justera : Centrum;
Färg : vit;
}
.behållare- klass {
display: flex;
rättfärdiga- innehåll : space-between;
stoppning: 20px;
}
.kolumn {
böja: 0 1 beräkn ( femtio % - 10 bildpunkter ) ;
gräns : 1px fast grönt;
bakgrund- Färg : vit;
box-storlek: border-box;
stoppning: 20px;
}
@ media ( max- bredd : 768 pixlar ) {
.behållare- klass {
flex-riktning: kolumn;
}
.kolumn {
böja: 0 1 100 %;
margin-bottom: 20px;
}
}Produktion
Här är resultatet av webbsidan efter applicering av mediefråga. Denna utdata är en responsiv layout med två kolumner:
Närhelst skärmen uppfyller de angivna dimensionerna med hjälp av en mediefråga för mobilen, förvandlas den till en layout med en kolumn:
Slutsats
För att implementera mediefrågor för mobila enheter, inkludera först ' utsiktsplats ' i ' huvud ' sektion. Skriv sedan mobildesignspecifik CSS. Lägg sedan till mediafrågan genom att använda taggen '@media' och ange storleken på mobilskärmen. Ange till exempel 768px för surfplattor och 480px för mobiltelefoner. Den här artikeln har förklarat proceduren för implementering av mediefrågor för mobila enheter.