HTML & CSS

Responsive Web Design

by Andrea Spera

Esistono due approcci al responsive web design:
Diversi file CSS:
Un approccio consiste nel creare file CSS separati per ciascun dispositivo o risoluzione. In questo modo, ogni dispositivo carica solo lo stile appropriato. Il browser seleziona automaticamente il file corretto in base al tipo di dispositivo o risoluzione, riducendo il carico di risorse.
Media queries:
Le media queries permettono di utilizzare un unico file CSS che si adatta a diverse risoluzioni o dispositivi. All'interno del CSS, puoi definire stili diversi per vari intervalli di larghezza dello schermo o altre caratteristiche del dispositivo. Questo approccio รจ flessibile e centralizza la gestione dello stile in un solo file.
Diversi file CSS
Esempio HTML 
<link rel="stylesheet" media="(max-width: 600px)" href="css/phone.css">
<link rel="stylesheet" media="(min-width: 600px)" href="css/tabletP.css">
<link rel="stylesheet" media="(min-width: 768px)" href="css/tabletL.css">
<link rel="stylesheet" media="(min-width: 992px)" href="css/laptop.css">
<link rel="stylesheet" media="(min-width: 1200px)" href="css/desktop.css">
<link rel="stylesheet" media="(min-width: 1600px)" href="css/big.css">
Media queries
Esempio CSS 
@media (max-width: 1600px){
	/* stili per schermi tra 1200px e 1600px */
	}
@media (max-width: 1200px) {
	/* stili per schermi tra 990px e 1200px */
	}
@media (max-width: 990px) {
	/* stili per chermi tra 768px e 990px */
	}
@media (max-width: 768px) {
	/* stili per schermi sotto i 768pxo */
	}