Această postare va menționa liniile directoare necesare pentru implementarea interogărilor media.
Cum se implementează interogări media pentru dispozitivele mobile?
Interogarea media poate fi aplicată dispozitivelor mobile prin simpla mențiune a „ @mass-media ” și specificând dimensiunea ecranului în acoladele mici. CSS-ul pentru acea interogare media poate fi apoi adăugat în interiorul acoladelor. Ori de câte ori dimensiunea ecranului îndeplinește dimensiunea specificată de utilizator, acesta va aplica interogarea media menționată.
Să prezentăm un exemplu practic pentru a afla implementarea interogărilor media pentru dispozitivele mobile.
Exemplu: creați un aspect care se modifică de la un aspect cu două coloane la un aspect pe o singură coloană prin aplicarea interogărilor media
În exemplul de mai jos, aspectul paginii web se va schimba de la un aspect de coloană la un aspect cu o singură coloană:
Pasul 1: Creați o structură HTML
- Mai întâi, creați un fișier HTML și conectați fișierul extern de foaie de stil CSS din acesta
secțiune. - Apoi, creați un
secțiunea și adăugați titlul site-ului web folosind etichetă. - Creeaza o după numele clasei „container-class” și încă douăîn interiorul acesteia au numele clasei „ coloană ”. < corp >
< h1 > Sugestie Linux < / h1 >
< / antet>
< div clasă = 'clasa container' >
< div clasă = 'coloană' >
< h2 > Secțiunea Unu < / h2 >
< p > Linux Hint este una dintre cele mai bune platforme de e-learning. < / p >
< / div >
< div clasă = 'coloană' >
< h2 > Secțiunea a doua < / h2 >
< p > Linux Hint este una dintre cele mai bune platforme de e-learning. < / p >
< / div >
< / div >
< / corp >Pasul 2: Aplicați CSS
Pe secțiunea corpului:- Mai întâi, specificați secțiunea corpului scriind „ corp ” etichetați și menționând bretele.
- În interiorul acoladelor, specificați familia de fonturi, culoarea de fundal, marginea și umplutura.
Pe
secțiune:
- Specificați culoarea textului, alinierea textului, culoarea de fundal și umplutura.
Pe „clasa container” div:
- Seteaza ' afişa „valoarea proprietății la „ contracta ” pentru a crea Flexbox.
- Folosește ' justifica-conținut ” pentru a adăuga spațiu între conținut și pentru a adăuga umplutură.
Pe clasa coloanei:
- Mai întâi, specificați valoarea declarată la „ contracta ” pentru a adăuga un spațiu între cele două secțiuni de aspect.
- După aceea, adăugați culoarea de fundal, chenarul, căptușeala și dimensiunea casetei.
Pasul 3: Aplicați Media Query
- Pentru a aplica interogarea media pentru dispozitivele mobile, mai întâi, adăugați „ @mass-media ' etichetă.
- Apoi, specificați valoarea „ 768px ” care este tipic pentru dispozitivele mobile la „ lățimea maximă ” proprietate în cadrul bretelor mici.
- După aceea, specificați „ coloană „valoare la „ flex-direcție ” proprietate care se va aplica “ clasa container-class”. Aceasta va schimba cele două coloane într-o singură coloană ori de câte ori este detectată dimensiunea specificată a ecranului.
- În cele din urmă, aplicați CSS pe „ coloană „clasa și specificați „ marginea ' și ' contracta ” valori:
familie de fonturi: sans-serif;
fundal- culoare : argint;
marja: 0 ;
umplutura: 0 ;
}
antet {
fundal- culoare : #2f4f4f;
umplutură: 20px;
text- alinia : centru;
culoare : alb;
}
.container- clasă {
display: flex;
justifica- conţinut : spațiu-între;
umplutură: 20px;
}
.coloană {
contracta: 0 1 calc ( cincizeci % - 10px ) ;
frontieră : 1px verde continuu;
fundal- culoare : alb;
dimensionare cutie: chenar-cutie;
umplutură: 20px;
}
@ mass-media ( max- lăţime : 768 px ) {
.container- clasă {
flex-direcție: coloană;
}
.coloană {
contracta: 0 1 100 %;
margine-jos: 20px;
}
}Ieșire
Iată rezultatul paginii web după aplicarea interogării media. Această ieșire este un aspect receptiv pe două coloane:
Ori de câte ori ecranul îndeplinește dimensiunile specificate folosind o interogare media pentru mobil, se transformă într-un aspect cu o singură coloană:
Concluzie
Pentru a implementa interogări media pentru dispozitive mobile, mai întâi, includeți „ fereastra ' în ' cap ' secțiune. Apoi, scrieți CSS specific designului mobil. După aceea, adăugați interogarea media utilizând eticheta „@media” și specificând dimensiunea ecranului mobil. De exemplu, specificați 768px pentru tablete și 480px pentru telefoane mobile. Acest articol a explicat procedura de implementare a interogărilor media pentru dispozitivele mobile.