Come implementare le media query per i dispositivi mobili

La query multimediale è un metodo CSS (Cascade Style Sheet). È stato introdotto per la prima volta nei CSS3. Viene utilizzato per includere le proprietà CSS nel sito Web solo quando una determinata condizione è vera. Le media query vengono inserite all’interno della sezione CSS, sia che sia inline, o un file esterno” Style.css ”. La media query si riferisce a tutti i tipi di media, incluso ' Tutto ', ' stampa ', ' schermo ', E ' discorso ”. Per implementare le media query per i dispositivi mobili, il ' schermo Verrà utilizzato il tipo ' e il punto di interruzione di “320px – 480px” verrà creato.

Questo post menzionerà le linee guida necessarie per implementare le media query.

Come implementare le media query per i dispositivi mobili?

La media query può essere applicata ai dispositivi mobili semplicemente menzionando il ' @media ' e specificando la dimensione dello schermo tra parentesi graffe. Il CSS per quella query multimediale può quindi essere aggiunto all'interno delle parentesi graffe. Ogni volta che le dimensioni dello schermo soddisfano le dimensioni specificate dall'utente, verrà applicata la media query indicata.

Facciamo una panoramica di un esempio pratico per apprendere l'implementazione delle media query per i dispositivi mobili.

Esempio: creare un layout che cambia da layout a due colonne a layout a una colonna applicando query multimediali

Nell'esempio seguente, il layout della pagina web cambierà da un layout a colonna a un layout a colonna singola:

Passaggio 1: crea una struttura HTML

Innanzitutto, crea un file HTML e collega il file del foglio di stile CSS esterno nel suo file sezione.
Quindi, crea un file e aggiungi l'intestazione del sito web utilizzando il comando
etichetta.
Creare un
dal nome della classe 'classe-container' e altri due
al suo interno ha il nome della classe ' colonna ”.

< corpo >

< h1 > Suggerimento per Linux < / h1 >
< / intestazione>
< div classe = 'classe contenitore' >
< div classe = 'colonna' >
< h2 > Sezione Uno < / h2 >
< P > Linux Hint è una delle migliori piattaforme di e-learning. < / P >
< / div >
< div classe = 'colonna' >
< h2 > Sezione Due < / h2 >
< P > Linux Hint è una delle migliori piattaforme di e-learning. < / P >
< / div >
< / div >
< / corpo >

Passaggio 2: applica i CSS
Sulla sezione del corpo:

Innanzitutto, specifica la sezione del corpo scrivendo il ' corpo ' e menzionando le parentesi graffe.
All'interno delle parentesi graffe, specifica la famiglia di caratteri, il colore di sfondo, il margine e il riempimento.

Sul sezione:

Specificare il colore del testo, l'allineamento del testo, il colore dello sfondo e la spaziatura.

Sul “classe contenitore” div:

Impostare il ' Schermo 'valore della proprietà a' flettere ' per creare il Flexbox.
Usa il ' giustificare il contenuto ' per aggiungere spazio tra il contenuto e aggiungere riempimento.

Sulla classe colonna:

Innanzitutto, specifica il valore indicato in ' flettere ' per aggiungere uno spazio tra le due sezioni del layout.
Successivamente, aggiungi il colore di sfondo, il bordo, il riempimento e il dimensionamento della casella.

Passaggio 3: applicare la query multimediale

Per applicare la query multimediale per i dispositivi mobili, aggiungi innanzitutto ' @media ' etichetta.
Quindi, specifica il valore “ 768px ' che è tipico per i dispositivi mobili al ' larghezza massima 'proprietà tra parentesi graffe.
Successivamente, specificare il ' colonna ' valore al ' direzione flessibile ' proprietà che si applicherà al ' classe contenitore-class”. Ciò modificherà le due colonne in una colonna ogni volta che viene rilevata la dimensione dello schermo specificata.

Infine, applica i CSS sul ' colonna ' classe e specificare ' margine ' E ' flettere ' valori:

corpo {
famiglia di caratteri: sans-serif;
sfondo- colore : argento;
margine: 0 ;
imbottitura: 0 ;
}

intestazione {
sfondo- colore : #2f4f4f;
imbottitura: 20px;
testo- allineare : centro;
colore : bianco;
}

.contenitore- classe {
display: flessibile;
giustificare- contenuto : spazio-tra;
imbottitura: 20px;
}

.colonna {
flettere: 0 1 calc ( cinquanta % - 10px ) ;
confine : 1px verde fisso;
sfondo- colore : bianco;
dimensionamento del box: border-box;
imbottitura: 20px;
}

@ media ( massimo- larghezza : 768px ) {
.contenitore- classe {
direzione flessibile: colonna;
}
.colonna {
flettere: 0 1 100 %;
margine inferiore: 20px;
}
}

Produzione
Ecco l'output della pagina Web dopo aver applicato la query multimediale. Questo output è un layout reattivo a due colonne:

Ogni volta che lo schermo soddisfa le dimensioni specificate utilizzando una query multimediale per dispositivi mobili, si trasforma in un layout a una colonna:

Conclusione

Per implementare le query multimediali per i dispositivi mobili, includi innanzitutto ' vista ' nel ' Testa ' sezione. Quindi, scrivi CSS specifici per il design mobile. Successivamente, aggiungi la query multimediale utilizzando il tag '@media' e specificando la dimensione dello schermo del dispositivo mobile. Ad esempio, specifica 768px per i tablet e 480px per i telefoni cellulari. Questo articolo ha spiegato la procedura per implementare le query multimediali per i dispositivi mobili.

Come implementare le media query per i dispositivi mobili