Introduzione alle media query in CSS

Esiste un comando speciale @media, che permette di eseguire codice diverso a seconda della larghezza dello schermo.

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è da 300px a 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* del codice */
}

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è maggiore di 300px:

@media (min-width: 300px) {
	/* del codice */
}

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è minore di 1200px:

@media (max-width: 1200px) {
	/* del codice */
}

Scriviamo nel nostro media query del codice. Per esempio, a determinate dimensioni dello schermo coloriamo i paragrafi in rosso:

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

E ora coloriamo i paragrafi in colori diversi a seconda della larghezza dello schermo:

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 0 a 800px:

p {
	font-size: 20px;
}

E fai in modo che il seguente codice venga applicato su schermi con larghezza da 800px in su:

p {
	font-size: 30px;
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 0 a 500px:

p {
	font-size: 15px;
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 500px a 900px:

p {
	font-size: 20px;
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 900px in su:

p {
	font-size: 30px;
}