Progettazione del sito web reattivo - Query media
- Pagina precedente Visualizzazione a griglia RWD
- Pagina successiva Immagine RWD
Cos'è una query media?
La query media è una tecnologia CSS introdotta in CSS3.
Viene utilizzato solo quando si soddisfano determinate condizioni @media Regole per richiamare i blocchi delle proprietà CSS.
Esempio
Se la finestra del browser è di 600px o meno, il colore di sfondo sarà un azzurro chiaro:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Aggiungi un punto di interruzione
In una lezione precedente di questo tutorial, abbiamo creato una pagina web con righe e colonne, ma questa pagina responsive non si presenta bene sugli schermi più piccoli.
La query media ti può aiutare. Possiamo aggiungere un punto di interruzione in cui alcune parti del design si comportano diversamente da entrambi i lati del punto di interruzione.
Computer desktop
Smartphone
Aggiungi un punto di interruzione a 768px utilizzando la query media:
Esempio
Quando lo schermo (finestra del browser) è inferiore a 768px, la larghezza di ogni colonna dovrebbe essere del 100%:
/* Per dispositivi desktop: */
.col-1 {larghezza: 8.33%;}
.col-2 {larghezza: 16.66%;}
.col-3 {larghezza: 25%;}
.col-4 {larghezza: 33.33%;}
.col-5 {larghezza: 41.66%;}
.col-6 {larghezza: 50%;}
.col-7 {larghezza: 58.33%;}
.col-8 {larghezza: 66.66%;}
.col-9 {larghezza: 75%;}
.col-10 {larghezza: 83.33%;}
.col-11 {larghezza: 91.66%;}
.col-12 {larghezza: 100%;}
@media only screen and (max-width: 768px) {
/* Per cellulare: */
[class*="col-"] {
larghezza: 100%;
}
}
Sempre progettazione Mobile First
Mobile First (Mobile First) significa che prima di progettare per desktop o qualsiasi altro dispositivo, è necessario progettare per dispositivi mobili (così la pagina si visualizzerà più rapidamente sui dispositivi più piccoli).
Questo significa che dobbiamo fare alcune migliorie nel CSS.
Quando la larghezza è inferiore a 768px, dovremmo modificare il design anziché la larghezza. Abbiamo così fatto un design 'prima mobile':
Esempio
/* Per cellulare: */
[class*="col-"] {
larghezza: 100%;
}
@media only screen and (larghezza minima: 768px) {
/* Per desktop: */
.col-1 {larghezza: 8.33%;}
.col-2 {larghezza: 16.66%;}
.col-3 {larghezza: 25%;}
.col-4 {larghezza: 33.33%;}
.col-5 {larghezza: 41.66%;}
.col-6 {larghezza: 50%;}
.col-7 {larghezza: 58.33%;}
.col-8 {larghezza: 66.66%;}
.col-9 {larghezza: 75%;}
.col-10 {larghezza: 83.33%;}
.col-11 {larghezza: 91.66%;}
.col-12 {larghezza: 100%;}
}
Un altro punto di interruzione
Puoi aggiungere quante più interruzioni desideri.
Inoltre, inseriremo un punto di interruzione tra tablet e smartphone.
Computer desktop
Tablet
Smartphone
Per questo motivo, abbiamo aggiunto una query media (a 600 pixel) e abbiamo aggiunto un gruppo di nuove classi per dispositivi con più di 600 pixel (ma meno di 768 pixel):
Esempio
Attenzione, le due classi sono quasi identiche, l'unica differenza è il nome (col- e col-s-):
/* Per cellulare: */
[class*="col-"] {
larghezza: 100%;
}
@media only screen and (larghezza minima: 600px) {
/* Per tablet: */
.col-s-1 {larghezza: 8.33%;}
.col-s-2 {larghezza: 16.66%;}
.col-s-3 {larghezza: 25%;}
.col-s-4 {larghezza: 33.33%;}
.col-s-5 {larghezza: 41.66%;}
.col-s-6 {larghezza: 50%;}
.col-s-7 {larghezza: 58.33%;}
.col-s-8 {larghezza: 66.66%;}
.col-s-9 {larghezza: 75%;}
.col-s-10 {larghezza: 83.33%;}
.col-s-11 {larghezza: 91.66%;}
.col-s-12 {larghezza: 100%;}
}
@media only screen and (larghezza minima: 768px) {
/* Per desktop: */
.col-1 {larghezza: 8.33%;}
.col-2 {larghezza: 16.66%;}
.col-3 {larghezza: 25%;}
.col-4 {larghezza: 33.33%;}
.col-5 {larghezza: 41.66%;}
.col-6 {larghezza: 50%;}
.col-7 {larghezza: 58.33%;}
.col-8 {larghezza: 66.66%;}
.col-9 {larghezza: 75%;}
.col-10 {larghezza: 83.33%;}
.col-11 {larghezza: 91.66%;}
.col-12 {larghezza: 100%;}
}
Sembrerebbe strano avere due gruppi di classi identiche, ma ci dà l'opportunità di usare HTML per decidere cosa accade alle colonne a ogni punto di interruzione:
Esempio HTML
Per computer desktop:
La prima e la terza parte copriranno 3 colonne. La parte centrale coprirà 6 colonne.
Per tablet:
La prima parte coprirà 3 colonne, la seconda parte coprirà 9 colonne, la terza parte verrà visualizzata sotto le prime due parti e coprirà 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>
Punti di interruzione tipici dei dispositivi
Ci sono innumerevoli schermi e dispositivi con diverse altezze e larghezze, quindi è difficile creare un punto di interruzione esatto per ogni dispositivo. Per semplificare, puoi puntare a questi cinque gruppi:
Esempio
/* Dispositivi di piccolissime dimensioni (telefoni, 600px e sotto) */
@media only screen and (max-width: 600px) {...}
/* Dispositivi di piccole dimensioni (tablet verticale e grandi telefoni, 600 pixel e oltre) */
@media only screen and (min-width: 600px) {...}
/* Dispositivi di medie dimensioni (tablet orizzontale, 768 pixel e oltre) */
@media only screen and (min-width: 768px) {...}
/* Dispositivi di grandi dimensioni (laptop e computer, 992px e oltre) */
@media only screen and (min-width: 992px) {...}
/* Dispositivi di grandi dimensioni (laptop e computer, 1200px e oltre) */
@media only screen and (min-width: 1200px) {...}
Direzione: Ritratto / Paesaggio
Le query media possono anche essere utilizzate per modificare la disposizione della pagina in base alla direzione del browser.
Puoi impostare un insieme di proprietà CSS che si applicano solo quando la larghezza della finestra del browser è maggiore della sua altezza, ossia la direzione 'orizzontale':
Esempio
Se la direzione è in modalità orizzontale (modalità paesaggio), lo sfondo del sito web è di colore bluastra:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Nascondere gli elementi con la query media
Un'altra applicazione comune delle query media è nascondere gli elementi su diverse dimensioni di schermo:
Esempio
/* Se la dimensione dello schermo è di 600 pixel o meno, nascondere l'elemento */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Modifica del font con la query media
Puoi anche utilizzare le query media per modificare la dimensione del font degli elementi su diverse dimensioni di schermo:
Esempio
/* Se la dimensione dello schermo è di 601px o più grande, impostare il font-size del <div> a 80px */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* Se la dimensione dello schermo è 600px o inferiore, impostare il font-size del <div> su 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Manuale di riferimento @media CSS
Per una panoramica completa di tutti i tipi di media e delle caratteristiche/espressioni, consulta Leggi @media regola nel manuale di riferimento CSS.
- Pagina precedente Visualizzazione a griglia RWD
- Pagina successiva Immagine RWD
