Tento príspevok bude obsahovať pokyny potrebné na implementáciu mediálnych dopytov.
Ako implementovať dopyty na médiá pre mobilné zariadenia?
Mediálny dopyt možno použiť na mobilné zariadenia jednoduchým uvedením „ @media ” a špecifikovanie veľkosti obrazovky v malých zátvorkách. CSS pre tento mediálny dotaz možno potom pridať do zložených zátvoriek. Kedykoľvek sa veľkosť obrazovky zhoduje s veľkosťou určenou používateľom, použije sa uvedený dopyt na médiá.
Pozrime sa na praktický príklad, aby sme sa naučili implementáciu mediálnych dopytov pre mobilné zariadenia.
Príklad: Vytvorte rozloženie, ktoré sa zmení z rozloženia s dvoma stĺpcami na rozloženie s jedným stĺpcom použitím dopytov na médiá
V nižšie uvedenom príklade sa rozloženie webovej stránky zmení zo stĺpcového rozloženia na rozloženie s jedným stĺpcom:
Krok 1: Vytvorte štruktúru HTML
- Najprv vytvorte súbor HTML a prepojte s ním externý súbor šablóny so štýlmi CSS oddiele.
- Potom vytvorte a
a pridajte nadpis webovej stránky pomocou tag. - Vytvor podľa názvu triedy „container-class“ a dvoch ďalšíchvnútri má názov triedy „ stĺpec “. < telo >
< h1 > Linuxová rada < / h1 >
< / hlavička>
< div trieda = 'kontajnerová trieda' >
< div trieda = 'stĺpec' >
< h2 > Prvá časť < / h2 >
< p > Linux Hint je jednou z najlepších platforiem elektronického vzdelávania. < / p >
< / div >
< div trieda = 'stĺpec' >
< h2 > Druhý oddiel < / h2 >
< p > Linux Hint je jednou z najlepších platforiem elektronického vzdelávania. < / p >
< / div >
< / div >
< / telo >Krok 2: Použite CSS
Na časti tela:- Najprv špecifikujte časť tela napísaním „ telo “ a zmienku o kučeravých zátvorkách.
- Vo vnútri zátvoriek zadajte rodinu písiem, farbu pozadia, okraj a výplň.
Na
sekcia:
- Zadajte farbu textu, zarovnanie textu, farbu pozadia a výplň.
Na “kontajnerová trieda” div:
- Nastaviť ' displej “hodnota nehnuteľnosti na “ flex “, aby ste vytvorili Flexbox.
- Použi ' ospravedlniť-obsah ” na pridanie medzery medzi obsah a pridanie výplne.
V triede stĺpcov:
- Najprv zadajte uvedenú hodnotu do „ flex ” na pridanie medzery medzi dve časti rozloženia.
- Potom pridajte farbu pozadia, orámovanie, výplň a veľkosť poľa.
Krok 3: Použite Media Query
- Ak chcete použiť dopyt na médiá pre mobilné zariadenia, najprv pridajte „ @media ” tag.
- Potom zadajte hodnotu „ 768 pixelov “, ktorý je typický pre mobilné zariadenia na „ max-šírka “vlastnosť v rámci malých zátvoriek.
- Potom špecifikujte „ stĺpec “hodnota k “ flex-direction “, ktorá sa bude vzťahovať na „ kontajnerová trieda“. Toto zmení dva stĺpce na jeden stĺpec vždy, keď sa zistí špecifikovaná veľkosť obrazovky.
- Nakoniec použite CSS na „ stĺpec “trieda a špecifikujte “ marža “ a „ flex hodnoty:
font-family: sans-serif;
pozadie- farba : striebro;
okraj: 0 ;
vypchávka: 0 ;
}
hlavička {
pozadie- farba : #2f4f4f;
výplň: 20px;
text- zarovnať : stred;
farba : biely;
}
.kontajner- trieda {
displej: flex;
ospravedlniť- obsahu : medzera-medzi;
výplň: 20px;
}
.stĺpec {
flex: 0 1 calc ( päťdesiat % – 10 pixelov ) ;
hranica : 1px plná zelená;
pozadie- farba : biely;
box-sizing: border-box;
výplň: 20px;
}
@ médiá ( max- šírka : 768 pixelov ) {
.kontajner- trieda {
smer ohybu: stĺpec;
}
.stĺpec {
flex: 0 1 100 %;
margin-bottom: 20px;
}
}Výkon
Tu je výstup webovej stránky po použití mediálneho dopytu. Tento výstup je dvojstĺpcové responzívne rozloženie:
Vždy, keď obrazovka spĺňa zadané rozmery pomocou mediálneho dopytu pre mobil, zmení sa na jednostĺpcové rozloženie:
Záver
Ak chcete implementovať mediálne dopyty pre mobilné zariadenia, najprv zahrňte „ výrez “ v „ hlavu “. Potom napíšte CSS špecifické pre mobilný dizajn. Potom pridajte mediálny dopyt pomocou značky „@media“ a špecifikovaním veľkosti mobilnej obrazovky. Zadajte napríklad 768 pixelov pre tablety a 480 pixelov pre mobilné telefóny. Tento článok vysvetľuje postup implementácie mediálnych dopytov pre mobilné zariadenia.