Tento příspěvek zmíní pokyny nezbytné pro implementaci mediálních dotazů.
Jak implementovat dotazy na média pro mobilní zařízení?
Mediální dotaz lze aplikovat na mobilní zařízení jednoduchým uvedením „ @media ” a určující velikost obrazovky v malých závorkách. CSS pro tento mediální dotaz lze poté přidat do složených závorek. Kdykoli velikost obrazovky odpovídá velikosti zadané uživatelem, použije se uvedený dotaz na média.
Podívejme se na praktický příklad, abychom se naučili implementaci mediálních dotazů pro mobilní zařízení.
Příklad: Vytvořte rozvržení, které se změní z rozvržení se dvěma sloupci na rozvržení s jedním sloupcem použitím dotazů na média
V níže uvedeném příkladu se rozvržení webové stránky změní ze sloupcového na jednosloupcové:
Krok 1: Vytvořte strukturu HTML
- Nejprve vytvořte soubor HTML a propojte s ním externí soubor šablony stylů CSS
sekce. - Poté vytvořte a
sekce a přidejte záhlaví webu pomocí štítek. - Vytvořit podle názvu třídy „container-class“ a dalších dvouuvnitř má název třídy „ sloupec “. < tělo >
< h1 > Nápověda pro Linux < / h1 >
< / záhlaví>
< div třída = 'kontejnerová třída' >
< div třída = 'sloupec' >
< h2 > První oddíl < / h2 >
< p > Linux Hint je jednou z nejlepších platforem e-learningu. < / p >
< / div >
< div třída = 'sloupec' >
< h2 > Sekce dva < / h2 >
< p > Linux Hint je jednou z nejlepších platforem e-learningu. < / p >
< / div >
< / div >
< / tělo >Krok 2: Použijte CSS
Na části těla:- Nejprve určete část těla napsáním „ tělo “ tag se zmínkou o složených závorkách.
- Uvnitř složených závorek určete rodinu písem, barvu pozadí, okraj a odsazení.
Na
sekce:
- Určete barvu textu, zarovnání textu, barvu pozadí a odsazení.
Na “kontejnerová třída” div:
- Nastav ' Zobrazit “hodnota nemovitosti na “ flex ” pro vytvoření Flexboxu.
- Použijte „ ospravedlnit-obsah ” pro přidání mezery mezi obsah a přidání výplně.
Ve třídě sloupců:
- Nejprve zadejte uvedenou hodnotu do „ flex ” pro přidání mezery mezi dvě sekce rozvržení.
- Poté přidejte barvu pozadí, ohraničení, výplň a velikost rámečku.
Krok 3: Použijte Media Query
- Chcete-li použít mediální dotaz pro mobilní zařízení, nejprve přidejte „ @media ” tag.
- Poté zadejte hodnotu „ 768 pixelů “, který je typický pro mobilní zařízení na “ max. šířka “vlastnost v malých složených závorkách.
- Poté zadejte „ sloupec “hodnota k “ flex-direction ” vlastnost, která se bude vztahovat na “ třída kontejnerů“. Tím se dva sloupce změní na jeden, kdykoli je detekována zadaná velikost obrazovky.
- Nakonec použijte CSS na „ sloupec “třída a specifikujte” okraj ' a ' flex hodnoty:
font-family: sans-serif;
Pozadí- barva : stříbrný;
okraj: 0 ;
vycpávka: 0 ;
}
záhlaví {
Pozadí- barva : #2f4f4f;
výplň: 20px;
text- zarovnat : střed;
barva : bílá;
}
.kontejner- třída {
displej: flex;
ospravedlnit- obsah : mezera-mezi;
výplň: 20px;
}
.sloupec {
flex: 0 1 calc ( padesáti % – 10 pixelů ) ;
okraj : 1px plná zelená;
Pozadí- barva : bílá;
box-sizing: border-box;
výplň: 20px;
}
@ média ( max- šířka : 768 pixelů ) {
.kontejner- třída {
směr ohybu: sloupec;
}
.sloupec {
flex: 0 1 100 %;
margin-bottom: 20px;
}
}Výstup
Zde je výstup webové stránky po použití mediálního dotazu. Tento výstup je dvousloupcové responzivní rozložení:
Kdykoli obrazovka splní zadané rozměry pomocí dotazu na média pro mobily, změní se na jednosloupcové rozvržení:
Závěr
Chcete-li implementovat dotazy na média pro mobilní zařízení, nejprve zahrňte „ výřez “ v „ hlava sekce “. Poté napište CSS specifické pro mobilní design. Poté přidejte dotaz na média pomocí značky „@media“ a zadáním velikosti mobilní obrazovky. Zadejte například 768 pixelů pro tablety a 480 pixelů pro mobilní telefony. Tento článek vysvětluje postup implementace dotazů na média pro mobilní zařízení.