Responsive Web Design - media query
Media (media) hanno introdotto una query su CSS3: query @media CSS3 .
Utilizzare @media query, è possibile definire stili diversi per i diversi tipi di supporto.
Esempi
Se la finestra del browser è più piccola di 500px, lo sfondo cambierà a luce blu:
body {
background-color: lightblue;
}
}
Prova »
Aggiungere un punto di interruzione
Nel precedente tutorial usiamo le righe e le colonne per creare pagine web, è reattivo, ma sul piccolo schermo e non spettacolo amichevole.
media query possono aiutarci a risolvere questo problema. Possiamo aggiungere un punto di interruzione nel mezzo del progetto di disegno, differenti punti di interruzione hanno effetti diversi.
Desktop
I dispositivi mobili
Utilizzare media query 768px aggiungere punti di interruzione:
Esempi
Quando lo schermo (la finestra del browser) è inferiore a 768px, la larghezza di ogni colonna è 100%:
.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 »
La priorità per la progettazione terminale mobile
Priorità significa desktop di fascia mobili e altri dispositivi progettati per dare priorità alla progettazione terminale mobile.
Questo significa che dobbiamo fare alcune modifiche al CSS.
Selezioniamo meno di 768px a cambiamenti di stile devono essere modificati nello stesso stile quando lo schermo è più ampio di 768px. I seguenti sono esempi di priorità terminale mobile:
[Class = * "col-"] {
width: 100%;
}
@media solo schermo e (min-width : 768px) {
/ * Per 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% ;}
}
altri punti di interruzione
È possibile aggiungere un punto di interruzione in base alle loro esigenze.
Abbiamo inoltre in grado dispositivi tablet e mobile telefono impostare punti di interruzione.
Desktop
tavoletta
I dispositivi mobili
600px dello schermo quando si aggiunge media query, e impostare il nuovo stile (ma inferiore dello schermo è più grande di 600px 768px):
Esempi
Si noti che due stili di classe sono gli stessi, ma nomi diversi (col- e Col-m-):
[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 »
Il codice sopra appare più di un sacco, ma può essere impostato automaticamente in base alle dimensioni dello schermo di stili diversi, quindi è ancora molto necessario.
Esempi HTML
Per desktop:
La prima e la terza sezione che attraversa tre. porzione intermedia tra domini 6.
Per i dispositivi tablet:
Il primo cross-domain 3, la seconda sezione che attraversa 9, la terza parte di un cross-domain 12:
<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>
Direzione: schermo orizzontale dello schermo / verticale
In combinazione con le media query CSS, è possibile creare adattarsi alle diverse orientamento del dispositivo (paesaggio, ritratto ritratto, etc.) layout.
sintassi:
orientation：portrait | landscape
- ritratto: specificare il dispositivo di uscita nella regione del visibile dell'altezza della pagina è maggiore o uguale alla larghezza
- paesaggio: il valore di circostanze ritratto Inter è paesaggio
Esempi
Se lo sfondo dello schermo in verticale sarà azzurro:
body {
background-color: azzurro;
}
}
Prova »