Responsive Web Design - Query sui media
Che cos'è una query multimediale?
Media query è una tecnica CSS introdotta in CSS3.
Utilizza la @media
regola per includere un blocco di proprietà CSS solo se una determinata condizione è vera.
Esempio
Se la finestra del browser è di 600 pixel o inferiore, il colore di sfondo sarà azzurro:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Aggiungi un punto di interruzione
In precedenza in questo tutorial abbiamo creato una pagina Web con righe e colonne ed era reattiva, ma non sembrava buona su uno schermo piccolo.
Le domande sui media possono aiutare in questo. Possiamo aggiungere un punto di interruzione in cui alcune parti del progetto si comporteranno in modo diverso su ciascun lato del punto di interruzione.
Desktop
Telefono
Utilizzare una query multimediale per aggiungere un punto di interruzione a 768px:
Esempio
Quando lo schermo (finestra del browser) diventa più piccolo di 768px, ogni colonna dovrebbe avere una larghezza del 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%;
}
}
Progetta sempre per i dispositivi mobili prima di tutto
Mobile First significa progettare per dispositivi mobili prima di progettare per desktop o qualsiasi altro dispositivo (questo renderà la visualizzazione della pagina più veloce sui dispositivi più piccoli).
Ciò significa che dobbiamo apportare alcune modifiche al nostro CSS.
Invece di cambiare gli stili quando la larghezza diventa inferiore a 768px, dovremmo cambiare il design quando la larghezza diventa maggiore di 768px. Questo renderà il nostro design Mobile First:
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%;}
}
Un altro punto di rottura
Puoi aggiungere tutti i punti di interruzione che desideri.
Inseriamo anche un punto di interruzione tra tablet e telefoni cellulari.
Desktop
Tavoletta
Telefono
A tale scopo, aggiungiamo un'altra query multimediale (a 600 px) e una serie di nuove classi per dispositivi di dimensioni superiori a 600 px (ma inferiori a 768 px):
Esempio
Nota che i due insiemi di classi sono quasi identici, l'unica differenza è il nome ( col-
e col-s-
):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-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%;}
}
Potrebbe sembrare strano che abbiamo due insiemi di classi identiche, ma ci dà l'opportunità in HTML , di decidere cosa accadrà con le colonne ad ogni punto di interruzione:
Esempio HTML
Per desktop:
La prima e la terza sezione si estenderanno entrambe su 3 colonne ciascuna. La sezione centrale si estenderà su 6 colonne.
Per compresse:
La prima sezione si estenderà su 3 colonne, la seconda si estenderà su 9 e la terza sezione verrà visualizzata sotto le prime due sezioni e si estenderà su 12 colonne:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Tipici punti di interruzione del dispositivo
Esistono tonnellate di schermi e dispositivi con diverse altezze e larghezze, quindi è difficile creare un punto di interruzione esatto per ciascun dispositivo. Per semplificare le cose potresti scegliere come target cinque gruppi:
Esempio
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientamento: Ritratto/Orizzontale
Le media query possono essere utilizzate anche per modificare il layout di una pagina in base all'orientamento del browser.
Puoi avere un insieme di proprietà CSS che si applicheranno solo quando la finestra del browser è più larga della sua altezza, un cosiddetto orientamento "Orizzontale":
Esempio
La pagina web avrà uno sfondo azzurro se l'orientamento è in modalità orizzontale:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Nascondi elementi con media query
Un altro uso comune delle query multimediali è nascondere elementi su schermi di dimensioni diverse:
Esempio
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Modifica la dimensione del carattere con le query multimediali
Puoi anche utilizzare le query multimediali per modificare la dimensione del carattere di un elemento su diverse dimensioni dello schermo:
Dimensione carattere variabile.
Esempio
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Riferimento CSS @media
Per una panoramica completa di tutti i tipi di media e le caratteristiche/espressioni, guarda la regola @media nel nostro riferimento CSS .