Esempi di query media CSS - Esempio
- Pagina precedente Query di media CSS
- Pagina successiva Introduzione RWD
Esempi di query media CSS - Più esempi
Vediamo altri esempi dell'uso delle query media.
Le query media sono una tecnologia popolare per passare fogli di stile personalizzati a diversi dispositivi.
Ecco un esempio semplice per dimostrare come cambiare il colore di sfondo per diversi dispositivi:
Esempio
/* Imposta il colore di sfondo del body in marrone chiaro */
body {
background-color: tan;
}
/* Sullo schermo con una dimensione di pixel inferiore o uguale a 992, imposta il colore di sfondo in blu */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Sullo schermo di 600 pixel o meno, imposta il colore di sfondo in oliva */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Vuoi sapere perché usiamo esattamente 992px e 600px? Sono quello che chiamiamo 'punti di interruzione tipici' degli dispositivi. Puoi trovarli nei nostri Tutorial di progettazione web reattiva Impara di più sulle interruzioni tipiche nel linguaggio C.
Query media del menu
In questo esempio, utilizziamo le query media per creare un menu di navigazione responsive, che varia in base alle diverse dimensioni degli schermi.
Esempio
/* Contenitore navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Link navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Sui schermi con una larghezza di 600 pixel o meno, i link del menu si accavallano invece di essere disposti in parallelo */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Query media delle colonne
Una delle applicazioni comuni delle query media è creare layout flessibili. In questo esempio, abbiamo creato un layout che cambia tra quattro colonne, due colonne e colonne a piena larghezza, a seconda delle diverse dimensioni degli schermi:
Schermi di grande dimensione:
Schermi di media dimensione:
Schermi di piccola dimensione:
Esempio
/* Creare quattro colonne fluttuanti adiacenti e uguali */
.column {
float: left;
width: 25%;
}
/* Sui schermi di 992 pixel o meno, si passa da quattro colonne a due */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Sui schermi con una larghezza di 600 pixel o meno, i colonne si accavallano invece di essere disposte in parallelo */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Suggerimento:metodi di creazione di layout più moderni utilizzando CSS Flexbox (vedi gli esempi sottostanti). Tuttavia, Internet Explorer 10 e versioni precedenti non lo supportano. Se è necessario supportare IE6-10, utilizzare il flusso (come mostrato sopra).
Per imparare di più sul modulo di layout flexbox, studia Flexbox CSS capitolo.
Per imparare di più sulle design web reattivi, studia il nostro Tutorial di progettazione web reattiva.
Esempio
/* Contenitore di contenitore flexbox */
.row {
display: flex;
flex-wrap: wrap;
}
/* Creare quattro colonne uguali */
.column {
flex: 25%;
padding: 20px;
}
/* Sui schermi di 992 pixel o meno, si passa da quattro colonne a due */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Sui schermi con una larghezza di 600 pixel o meno, i colonne si accavallano invece di essere disposte in parallelo */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Nascondere gli elementi con le query media
Un'altra comune applicazione delle query media è nascondere gli elementi su schermi di diverse dimensioni:
Nelle schermate piccole nasconderò.
Esempio
/* Se la dimensione dello schermo è di 600 pixel o inferiore, nascondi l'elemento */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Modifica della dimensione del font con le query media
Puoi anche utilizzare le query media per modificare la dimensione del font degli elementi su diversi dimensioni di schermo:
Dimensione del font variabile.
Esempio
/* Se la dimensione dello schermo è superiore ai 600 pixel, imposta la dimensione del font del <div> a 80 pixel */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Se la dimensione dello schermo è di 600 pixel o inferiore, imposta la dimensione del font del <div> a 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Galleria di immagini flessibile
In questo esempio, utilizziamo le query media insieme a flexbox per creare una galleria di immagini responsive:
Esempio
Sito web flessibile
In questo esempio, utilizziamo le query media insieme a flexbox per creare un sito web responsive che contiene una barra di navigazione flessibile e contenuto flessibile.
Esempio
Direzione: ritratto / paesaggio
Le query media possono anche essere utilizzate per modificare la layout 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 dell'altezza, ossia lo schermo in modalità orizzontale:
Esempio
Se la direzione è in modalità orizzontale, utilizza lo sfondo di colore chiaro blu:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Larghezza minima a larghezza massima
Puoi anche impostare le proprietà min-width e max-width per stabilire la larghezza minima e massima.
Ad esempio, quando la larghezza del browser è tra 600 e 900 pixel, cambia l'aspetto dell'elemento <div>:
Esempio
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Utilizzo del valore aggiuntivo: nell'esempio seguente, utilizziamo la virgola (simile all'operatore OR) per aggiungere query media aggiuntive a query media esistenti:
Esempio
/* Quando la larghezza è tra 600 e 900 pixel o superiore a 1100 pixel - cambia l'aspetto del <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Manuale di riferimento @media CSS
Un'elencazione completa di tutti i tipi di media e delle caratteristiche/espressioni, consulta Regola @media nella riferimento CSS.
Suggerimento:Per ulteriori informazioni sulla progettazione web reattiva (come adattarsi a diversi dispositivi e schermi) e sull'uso dei punti di intersezione delle query di media, leggi il nostro Tutorial di progettazione web reattiva.
- Pagina precedente Query di media CSS
- Pagina successiva Introduzione RWD
