Kaip įdiegti medijos užklausas mobiliesiems įrenginiams

Medijos užklausa yra CSS (kaskados stiliaus lapo) metodas. Pirmą kartą jis buvo pristatytas CSS3. Jis naudojamas CSS ypatybėms įtraukti į svetainę tik tada, kai tam tikra sąlyga yra teisinga. Medijos užklausos pateikiamos CSS skiltyje, nesvarbu, ar ji yra įterptoji, ar išorinis failas “ Stilius.css “. Medijos užklausa nurodo visus medijos tipus, įskaitant „ visi ', ' spausdinti ', ' ekranas “ ir „ kalba “. Norėdami įdiegti medijos užklausas mobiliesiems įrenginiams, „ ekranas “ tipas bus naudojamas ir lūžio taškas „320 piks. – 480 piks.“ bus sukurta.

Šiame įraše bus paminėtos gairės, reikalingos žiniasklaidos užklausoms įgyvendinti.

Kaip įdiegti medijos užklausas mobiliesiems įrenginiams?

Medijos užklausą galima pritaikyti mobiliesiems įrenginiams tiesiog paminėjus „ @media “ žymą ir mažuose skliaustuose nurodydami ekrano dydį. Tada tos medijos užklausos CSS gali būti įtrauktas į riestinius skliaustus. Kai ekrano dydis atitinka vartotojo nurodytą dydį, bus pritaikyta nurodyta medijos užklausa.

Apžvelgsime praktinį pavyzdį, kaip išmokti įgyvendinti medijos užklausas mobiliesiems įrenginiams.

Pavyzdys: sukurkite maketą, kuris pakeistų dviejų stulpelių išdėstymą į vieno stulpelio išdėstymą taikant medijos užklausas

Toliau pateiktame pavyzdyje tinklalapio išdėstymas pasikeis iš stulpelio išdėstymo į vieno stulpelio išdėstymą:

1 veiksmas: sukurkite HTML struktūrą

Pirmiausia sukurkite HTML failą ir jame susiekite išorinį CSS stiliaus lapo failą skyrius.
Tada sukurkite a skyrių ir pridėkite svetainės antraštę naudodami
žyma.
Sukurti
pagal klasės pavadinimą „container-class“, o dar dviejuose
yra klasės pavadinimas „ stulpelyje “.

< kūnas >

< h1 > Linux patarimas < / h1 >
< / antraštė>
< div klasė = 'konteinerių klasė' >
< div klasė = 'stulpelis' >
< h2 > Pirmas skyrius < / h2 >
< p > „Linux Hint“ yra viena geriausių el. mokymosi platformų. < / p >
< / div >
< div klasė = 'stulpelis' >
< h2 > Antras skyrius < / h2 >
< p > „Linux Hint“ yra viena geriausių el. mokymosi platformų. < / p >
< / div >
< / div >
< / kūnas >

2 veiksmas: taikykite CSS
Ant kūno dalies:

Pirmiausia nurodykite teksto skyrių, parašydami „ kūnas “ žymą ir minint garbanotas petnešas.
Skliaustuose nurodykite šriftų šeimą, fono spalvą, paraštę ir užpildą.

Ant skyrius:

Nurodykite teksto spalvą, teksto lygiavimą, fono spalvą ir užpildymą.

Ant „konteinerių klasė“ div:

Nustatyti ' ekranas ' nuosavybės vertė į ' lankstus “, kad sukurtumėte „Flexbox“.
Naudoti ' pateisinti-turinys “, kad pridėtumėte tarpą tarp turinio ir užpildytumėte.

Stulpelio klasėje:

Pirmiausia nurodykite nurodytą reikšmę „ lankstus “ savybę, norėdami pridėti tarpą tarp dviejų išdėstymo sekcijų.
Po to pridėkite fono spalvą, kraštinę, užpildą ir dėžutės dydį.

3 veiksmas: taikykite medijos užklausą

Norėdami pritaikyti medijos užklausą mobiliesiems įrenginiams, pirmiausia pridėkite „ @media “ žymą.
Tada nurodykite reikšmę ' 768 pikseliai “, kuris būdingas mobiliesiems įrenginiams maksimalus plotis “ nuosavybė mažuose petnešose.
Po to nurodykite „ stulpelyje “ vertė į “ lankstumo kryptis “ nuosavybė, kuri bus taikoma „ konteineris-klasė“ klasė. Tai pakeis du stulpelius į vieną stulpelį, kai tik bus aptiktas nurodytas ekrano dydis.

Galiausiai pritaikykite CSS „ stulpelyje “ klasę ir nurodykite „ marža “ ir „ lankstus “ vertės:

kūnas {
šriftų šeima: sans-serif;
fonas- spalva : sidabras;
marža: 0 ;
pamušalas: 0 ;
}

antraštę {
fonas- spalva : #2f4f4f;
pamušalas: 20px;
tekstas- lygiuotis : centras;
spalva : baltas;
}

.container- klasė {
ekranas: lankstus;
pateisinti - turinys : tarpas-tarp;
pamušalas: 20px;
}

.stulpelis {
lankstus: 0 1 skaičiuok ( penkiasdešimt % – 10 tšk ) ;
siena : 1px vientisa žalia;
fonas- spalva : baltas;
dėžutės dydis: bortelis-dėžė;
pamušalas: 20px;
}

@ žiniasklaida ( max- plotis : 768px ) {
.container- klasė {
lankstumo kryptis: stulpelis;
}
.stulpelis {
lankstus: 0 1 100 %;
paraštė-apačia: 20 pikselių;
}
}

Išvestis
Čia yra tinklalapio išvestis pritaikius medijos užklausą. Ši išvestis yra dviejų stulpelių interaktyvus išdėstymas:

Kai ekranas atitinka nurodytus matmenis naudojant medijos užklausą mobiliesiems, jis paverčiamas vieno stulpelio išdėstymu:

Išvada

Norėdami įdiegti medijos užklausas mobiliesiems įrenginiams, pirmiausia įtraukite „ peržiūros sritis ' viduje ' galva ' skyrius. Tada parašykite mobiliojo dizaino CSS. Po to pridėkite medijos užklausą naudodami žymą „@media“ ir nurodydami mobiliojo telefono ekrano dydį. Pavyzdžiui, planšetiniams kompiuteriams nurodykite 768 piks., o mobiliesiems telefonams – 480 piks. Šiame straipsnyje paaiškinta medijos užklausų mobiliuosiuose įrenginiuose diegimo procedūra.

Kaip įdiegti medijos užklausas mobiliesiems įrenginiams