Kako implementirati medijske poizvedbe za mobilne naprave

Medijska poizvedba je metoda CSS (Cascade Style Sheet). Prvič je bil predstavljen v CSS3. Uporablja se za vključitev lastnosti CSS na spletno mesto le, če je izpolnjen določen pogoj. Medijske poizvedbe so postavljene v razdelek CSS, ne glede na to, ali je v vrstici ali zunanja datoteka ' Style.css ”. Medijska poizvedba se nanaša na vse vrste medijev, vključno z » vse ', ' tiskanje ', ' zaslon «, in » govor ”. Za izvajanje medijskih poizvedb za mobilne naprave je » zaslon ” in prelomna točka »320px – 480px« bo ustvarjen.

Ta objava bo omenila smernice, potrebne za izvajanje medijskih poizvedb.

Kako implementirati medijske poizvedbe za mobilne naprave?

Predstavnostno poizvedbo lahko uporabite za mobilne naprave tako, da preprosto omenite » @mediji ” in navedite velikost zaslona v oklepajih. CSS za to predstavnostno poizvedbo lahko nato dodate znotraj zavitih oklepajev. Kadarkoli se velikost zaslona ujema z velikostjo, ki jo določi uporabnik, bo uporabljena navedena medijska poizvedba.

Oglejmo si praktični primer, da se naučimo implementacije medijskih poizvedb za mobilne naprave.

Primer: ustvarite postavitev, ki se spremeni iz postavitve dveh stolpcev v postavitev enega stolpca z uporabo medijskih poizvedb

V spodnjem primeru se bo postavitev spletne strani spremenila iz postavitve stolpca v postavitev enega stolpca:

1. korak: Ustvarite strukturo HTML

Najprej ustvarite datoteko HTML in v njej povežite zunanjo datoteko s slogi CSS razdelek.
Nato ustvarite a in dodajte naslov spletnega mesta z uporabo
oznaka.
Ustvariti
z imenom razreda “container-class” in še dva
znotraj ima ime razreda “ stolpec ”.

< telo >

< h1 > Namig za Linux < / h1 >
< / glava>
< div razred = 'kontejnerski razred' >
< div razred = 'stolpec' >
< h2 > Prvi del < / h2 >
< str > Linux Hint je ena najboljših platform za e-učenje. < / str >
< / div >
< div razred = 'stolpec' >
< h2 > Drugi del < / h2 >
< str > Linux Hint je ena najboljših platform za e-učenje. < / str >
< / div >
< / div >
< / telo >

2. korak: Uporabite CSS
Na delu telesa:

Najprej določite del telesa tako, da napišete » telo ” in omenja zavite oklepaje.
Znotraj oklepajev določite družino pisav, barvo ozadja, rob in odmik.

Na razdelek:

Določite barvo besedila, poravnavo besedila, barvo ozadja in odmik.

Na 'kontejnerski razred' div:

Nastavite ' zaslon » vrednost lastnosti za « flex ”, da ustvarite Flexbox.
Uporabi ' justify-content «, da dodate prostor med vsebino in dodate oblazinjenje.

V razredu stolpcev:

Najprej navedite navedeno vrednost v ' flex ” za dodajanje presledka med obema razdelkoma postavitve.
Nato dodajte barvo ozadja, obrobo, oblazinjenje in velikost polja.

3. korak: Uporabite Media Query

Če želite uporabiti medijsko poizvedbo za mobilne naprave, najprej dodajte » @mediji ' oznaka.
Nato določite vrednost ' 768 slikovnih pik «, kar je značilno za mobilne naprave do » največja širina ” v oklepajih.
Po tem določite » stolpec ' vrednost za ' flex-direction ' lastnost, ki bo veljala za ' kontejnerski razred. To bo spremenilo dva stolpca v en stolpec, kadar koli bo zaznana navedena velikost zaslona.

Na koncu uporabite CSS na ' stolpec ' razred in navedite ' marža « in » flex ' vrednote:

telo {
družina pisav: sans-serif;
ozadje- barva : srebrna;
rob: 0 ;
oblazinjenje: 0 ;
}

glava {
ozadje- barva : #2f4f4f;
oblazinjenje: 20px;
besedilo- poravnati : center;
barva : bela;
}

.container- razred {
zaslon: flex;
utemelji- vsebino : presledek med;
oblazinjenje: 20px;
}

.stolpec {
upogib: 0 1 kalk ( petdeset % - 10 slikovnih pik ) ;
meja : 1px polna zelena;
ozadje- barva : bela;
velikost škatle: border-box;
oblazinjenje: 20px;
}

@ mediji ( max- premer : 768 slikovnih pik ) {
.container- razred {
flex-direction: stolpec;
}
.stolpec {
upogib: 0 1 100 %;
rob-spodaj: 20px;
}
}

Izhod
Tukaj je rezultat spletne strani po uporabi medijske poizvedbe. Ta rezultat je odzivna postavitev z dvema stolpcema:

Kadar koli zaslon doseže določene dimenzije z uporabo medijske poizvedbe za mobilne naprave, se spremeni v postavitev v enem stolpcu:

Zaključek

Če želite implementirati medijske poizvedbe za mobilne naprave, najprej vključite » vidno polje ' v ' glavo ”. Nato napišite CSS za mobilno oblikovanje. Nato dodajte medijsko poizvedbo z uporabo oznake »@media« in določite velikost zaslona mobilne naprave. Določite na primer 768 slikovnih pik za tablične računalnike in 480 slikovnih pik za mobilne telefone. V tem članku je razložen postopek izvajanja medijskih poizvedb za mobilne naprave.

Kako implementirati medijske poizvedbe za mobilne naprave