Ez a bejegyzés megemlíti a médialekérdezések végrehajtásához szükséges irányelveket.
Hogyan implementáljunk médialekérdezéseket mobileszközökön?
A médialekérdezés a „ @média ” címke és a képernyő méretének megadása a kis kapcsos zárójelben. Az adott médialekérdezés CSS-je ezután hozzáadható a kapcsos zárójelek közé. Amikor a képernyő mérete eléri a felhasználó által megadott méretet, a megadott médialekérdezést alkalmazza.
Tekintsünk át egy gyakorlati példát a médialekérdezések mobileszközökön való megvalósításának megismerésére.
Példa: Hozzon létre egy elrendezést, amely kétoszlopos elrendezésről egyoszlopos elrendezésre változik médialekérdezések alkalmazásával
Az alábbi példában a weboldal elrendezése oszlopelrendezésről egyoszlopos elrendezésre változik:
1. lépés: Hozzon létre egy HTML-struktúrát
- Először hozzon létre egy HTML-fájlt, és csatolja hozzá a külső CSS-stíluslapfájlt
szakasz. - Ezután hozzon létre a
szakaszt, és adja hozzá a webhely fejlécet a segítségével címke. - Hozzon létre egy a „container-class” osztálynévvel, és a benne lévő további kétosztálynévvel rendelkezik: „ oszlop ”. < test >
< h1 > Linux tipp < / h1 >
< / fejléc>
< div osztály = 'konténer osztály' >
< div osztály = 'oszlop' >
< h2 > Első szakasz < / h2 >
< p > A Linux Hint az egyik legjobb e-learning platform. < / p >
< / div >
< div osztály = 'oszlop' >
< h2 > Második szakasz < / h2 >
< p > A Linux Hint az egyik legjobb e-learning platform. < / p >
< / div >
< / div >
< / test >2. lépés: Alkalmazza a CSS-t
A karosszéria részen:- Először adja meg a törzsrészt a ' test ” címke és a göndör fogszabályzó megemlítése.
- A kapcsos zárójelben adja meg a betűcsaládot, a háttérszínt, a margót és a kitöltést.
A
szakasz:
- Adja meg a szöveg színét, a szöveg igazítását, a háttérszínt és a kitöltést.
A „konténerosztály” div:
- Állítsa be a „ kijelző ' ingatlan értéke ' Flex ” a Flexbox létrehozásához.
- Használja a ' indokolja-tartalom ” , hogy helyet adjon a tartalom és a kitöltés között.
Oszloposztályon:
- Először adja meg a megadott értéket a ' Flex ” tulajdonság, hogy szóközt adjon a két elrendezési szakasz közé.
- Ezután adja hozzá a háttérszínt, a szegélyt, a kitöltést és a doboz méretét.
3. lépés: Alkalmazza a Media Queryt
- A médialekérdezés mobileszközökön történő alkalmazásához először adja hozzá a „ @média ” címke.
- Ezután adja meg a ' 768 képpont ' ami a mobileszközökre jellemző a ' max szélesség ” tulajdonság a kis fogszabályozón belül.
- Ezt követően adja meg a „ oszlop ' érték a ' flex-irány ' ingatlan, amely a ' konténer-osztály” osztály. Ez a két oszlopot egy oszlopmá változtatja, amikor a rendszer a megadott képernyőméretet észleli.
- Végül alkalmazza a CSS-t a „ oszlop ' osztályt, és adja meg a ' árrés ” és „ Flex ” értékek:
font-family: sans-serif;
háttér- szín : ezüst;
árrés: 0 ;
párnázás: 0 ;
}
fejléc {
háttér- szín : #2f4f4f;
padding: 20px;
szöveg- igazítsa : középen;
szín : fehér;
}
.tartály- osztály {
kijelző: flex;
igazolni- tartalom : térköz;
padding: 20px;
}
.oszlop {
Flex: 0 1 kalc ( ötven % - 10 képpont ) ;
határ : 1px egyszínű zöld;
háttér- szín : fehér;
box-sizing: border-box;
padding: 20px;
}
@ média ( max- szélesség : 768 képpont ) {
.tartály- osztály {
hajlítási irány: oszlop;
}
.oszlop {
Flex: 0 1 100 %;
margó-alsó: 20 képpont;
}
}Kimenet
Itt látható a weboldal kimenete a médialekérdezés alkalmazása után. Ez a kimenet kétoszlopos reszponzív elrendezés:
Amikor a képernyő megfelel a megadott méreteknek a mobileszközhöz készült médialekérdezés segítségével, egyoszlopos elrendezéssé válik:
Következtetés
A médialekérdezések mobileszközökön való megvalósításához először adja meg a „ nézetablak ' ban,-ben ' fej ” szakaszban. Ezután írjon mobiltervezés-specifikus CSS-t. Ezután adja hozzá a médialekérdezést a „@media” címke használatával, és adja meg a mobil képernyőjének méretét. Például adjon meg 768 képpontot táblagépekhez és 480 képpontot mobiltelefonokhoz. Ez a cikk ismerteti a médialekérdezések mobileszközökön való megvalósításának eljárását.