Kako implementirati medijske upite za mobilne uređaje

Medijski upit je metoda CSS-a (Cascade Style Sheet). Prvi put je predstavljen u CSS3. Koristi se za uključivanje CSS svojstava na web mjesto samo kada je određeni uvjet istinit. Medijski upiti smješteni su unutar CSS odjeljka, bilo da je ugrađen ili vanjska datoteka ' Stil.css ”. Medijski upit odnosi se na sve vrste medija uključujući ' svi ', ' ispisati ', ' zaslon ', i ' govor ”. Za implementaciju medijskih upita za mobilne uređaje, ' zaslon ” koristit će se tip i prijelomna točka od “320px – 480px” će se stvoriti.

Ovaj će post spomenuti smjernice potrebne za implementaciju medijskih upita.

Kako implementirati medijske upite za mobilne uređaje?

Medijski upit može se primijeniti na mobilne uređaje jednostavnim spominjanjem ' @mediji ” i navođenjem veličine zaslona u malim zagradama. CSS za taj medijski upit tada se može dodati unutar vitičastih zagrada. Kad god veličina zaslona odgovara veličini koju je odredio korisnik, primijenit će navedeni medijski upit.

Pogledajmo praktični primjer kako bismo naučili implementaciju medijskih upita za mobilne uređaje.

Primjer: Napravite izgled koji se mijenja iz rasporeda s dva stupca u raspored s jednim stupcem primjenom medijskih upita

U primjeru u nastavku, izgled web-stranice promijenit će se iz rasporeda stupaca u izgled s jednim stupcem:

Korak 1: Napravite HTML strukturu

Najprije izradite HTML datoteku i povežite vanjsku datoteku CSS stilova u njoj odjeljak.
Zatim stvorite a odjeljak i dodajte naslov web stranice pomoću
označiti.
Stvoriti
imenom klase “container-class” i još dva
unutar njega ima naziv klase “ stupac ”.

< tijelo >

< h1 > Savjet za Linux < / h1 >
< / zaglavlje>
< div razreda = 'kontejnerska klasa' >
< div razreda = 'stupac' >
< h2 > Prvi odjeljak < / h2 >
< str > Linux Hint jedna je od najboljih platformi za e-učenje. < / str >
< / div >
< div razreda = 'stupac' >
< h2 > Drugi odjeljak < / h2 >
< str > Linux Hint jedna je od najboljih platformi za e-učenje. < / str >
< / div >
< / div >
< / tijelo >

Korak 2: Primijenite CSS
Na dijelu tijela:

Najprije odredite dio tijela tako da napišete ' tijelo ” i spominjanjem vitičastih zagrada.
Unutar vitičastih zagrada navedite obitelj fontova, boju pozadine, marginu i ispunu.

Na odjeljak:

Odredite boju teksta, poravnanje teksta, boju pozadine i ispunu.

Na “kontejnerska klasa” div:

Postavi ' prikaz ' vrijednost svojstva za ' savijati ” za izradu Flexboxa.
Koristiti ' opravdati-sadržaj ” za dodavanje razmaka između sadržaja i dodavanje ispune.

Na klasi stupca:

Prvo navedite navedenu vrijednost u ' savijati ” za dodavanje razmaka između dva odjeljka izgleda.
Nakon toga dodajte boju pozadine, obrub, ispunu i veličinu okvira.

Korak 3: Primijenite medijski upit

Da biste primijenili medijski upit za mobilne uređaje, prvo dodajte ' @mediji ” oznaka.
Zatim navedite vrijednost ' 768 px ' što je tipično za mobilne uređaje na ' maksimalna širina ” svojstvo unutar malih zagrada.
Nakon toga navedite ' stupac ” vrijednost za “ flex-direction ' svojstvo koje će se primjenjivati na ' kontejner-klasa” klasa. Ovo će promijeniti dva stupca u jedan stupac kad god se otkrije određena veličina zaslona.

Na kraju, primijenite CSS na ' stupac ' klasa i navedite ' margina ' i ' savijati ” vrijednosti:

tijelo {
obitelj-fontova: sans-serif;
pozadina- boja : srebro;
margina: 0 ;
padding: 0 ;
}

Zaglavlje {
pozadina- boja : #2f4f4f;
ispuna: 20px;
tekst- uskladiti : centar;
boja : bijela;
}

.kontejner- razreda {
zaslon: savitljiv;
opravdati- sadržaj : razmak između;
ispuna: 20px;
}

.stupac {
savijati: 0 1 kalk ( pedeset % - 10 px ) ;
granica : 1px jednobojno zeleno;
pozadina- boja : bijela;
veličina okvira: border-box;
ispuna: 20px;
}

@ medijima ( max- širina : 768 px ) {
.kontejner- razreda {
smjer savijanja: stupac;
}
.stupac {
savijati: 0 1 100 %;
margina-dno: 20px;
}
}

Izlaz
Ovo je rezultat web stranice nakon primjene medijskog upita. Ovaj izlaz je responzivni raspored u dva stupca:

Kad god zaslon zadovolji navedene dimenzije pomoću medijskog upita za mobitel, pretvara se u izgled s jednim stupcem:

Zaključak

Da biste implementirali medijske upite za mobilne uređaje, prvo uključite ' prozor za prikaz ' u ' glavu ” odjeljak. Zatim napišite CSS specifičan za mobilni dizajn. Nakon toga dodajte medijski upit pomoću oznake “@media” i navedite veličinu zaslona mobilnog telefona. Na primjer, odredite 768px za tablete i 480px za mobilne telefone. Ovaj je članak objasnio postupak implementacije medijskih upita za mobilne uređaje.

Kako implementirati medijske upite za mobilne uređaje