Che cosa è un Media Query?
media query è una tecnica CSS introdotta in CSS3.
Esso utilizza il @media regola per includere un blocco di proprietà CSS solo se una certa condizione è vera.
Esempio
Se la finestra del browser è più piccola di 500px, il colore di sfondo cambierà a azzurro:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Prova tu stesso " Aggiungere un punto di interruzione
All'inizio di questo tutorial abbiamo realizzato una pagina web con righe e colonne, ed è stato reattivo, ma non ha un bell'aspetto su un piccolo schermo.
media query può aiutare in questo. Possiamo aggiungere un punto di interruzione in cui alcune parti del disegno si comportano in modo diverso su ogni lato del punto di interruzione.
Desktop
Telefono
Utilizzare una media query per aggiungere un punto di interruzione a 768px:
Esempio
Quando lo schermo (finestra del browser) diventa inferiore a 768px, ciascuna colonna deve avere una larghezza di 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Prova tu stesso " Progettare Sempre for Mobile First
Cellulare primo mezzo di progettazione per il mobile prima di progettare per il desktop o qualsiasi altro dispositivo (Questo renderà la visualizzazione della pagina più veloce su dispositivi più piccoli).
Ciò significa che dobbiamo fare alcuni cambiamenti nel nostro CSS.
Invece di cambiare stili quando la larghezza diventa più piccola di 768px, dovremmo cambiare il design quando la larghezza diventa più grande di 768px. Questo renderà il nostro design mobile Primo:
Esempio
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Prova tu stesso " Un altro punto di interruzione
È possibile aggiungere il numero di punti di interruzione che vuoi.
Ci sarà anche inserire un punto di interruzione tra il tablet e telefoni cellulari.
Desktop
Tavoletta
Telefono
Lo facciamo con l'aggiunta di un altro media query (a 600px), e una serie di nuove classi per i dispositivi più grandi di 600px (ma più piccola di 768px):
Esempio
Si noti che i due insiemi di classi sono quasi identiche, l'unica differenza è il nome ( col- e col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Prova tu stesso " Potrebbe sembrare strano che abbiamo due insiemi di classi identiche, ma ci dà l'opportunità in HTML, per decidere che cosa accadrà con le colonne in ogni punto di interruzione:
Esempio HTML
Per desktop:
La prima e la terza sezione saranno entrambi estendersi 3 colonne ciascuna. La sezione centrale si estenderà 6 colonne.
Per le tavolette:
La prima sezione si estenderà 3 colonne, la seconda coprirà 9, e la terza sezione sarà visualizzato sotto le prime due sezioni, e avrà una durata di 12 colonne:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientamento: Verticale / Orizzontale
query supporti possono anche essere utilizzati per modificare il layout di una pagina a seconda dell'orientamento del browser.
Si può avere un insieme di proprietà CSS che si applicherà solo quando la finestra del browser è più ampio rispetto la sua altezza, un cosiddetto orientamento "Paesaggio":
Esempio
La pagina Web avrà uno sfondo azzurro se l'orientamento è in modalità orizzontale:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Prova tu stesso "