Le Media Query sono una componente fondamentale nella progettazione e sviluppo di siti web responsive, permettono infatti di adattare il design e il layout a seconda del dispositivo su cui viene visualizzato.
In questo articolo vi consiglierò le regole che personalmente utilizzo sempre durante la creazione dei miei siti web, e che mi hanno permesso di realizzare siti responsive e fruibili da qualsiasi schermo.
Web Design responsive con i Breakpoint corretti
Il primo passo per utilizzare le Media Query è definire i breakpoint del design, cioè i punti di larghezza dello schermo a cui si desidera modificare il layout del sito web. I breakpoint più comuni sono:
- Molto Piccolo (Telefono): Fino a 600px
- Piccolo (Telefono & Tablet Verticale): Da 600px a 768px
- Medio (Telefono & Tablet Orizzontale): Da 768px a 992px
- Grande (Portatili): Da 992px a 1200px
- Molto Grande (Computer): Oltre 1200px
Questi sono i breakpoint ideali per un sito web, potrebbe essere diversi a seconda del design e del contenuto che si voglia impostare. Per trovare quelli più opportuni al proprio progetto è sempre meglio testare direttamente.
Esempi di Media Queries per il Responsive Web Design
Una volta definiti i breakpoint, è possibile configurare ed utilizzare le regole CSS di Media Query per modificare il layout della pagina.
/* Molto Piccolo - Telefono */
@media only screen and (max-width: 600px) {...}
/* Piccolo - Telefono & Tablet Verticale */
@media only screen and (min-width: 600px) {...}
/* Medio - Telefono & Tablet Orizzontale */
@media only screen and (min-width: 768px) {...}
/* Grande – Portatili */
@media only screen and (min-width: 992px) {...}
/* Molto Grande – Computer */
@media only screen and (min-width: 1200px) {...}Siti Web adatti ad ogni… schermo!
Le Media Query sono uno strumento potente per creare siti web responsive con un’esperienza utente ottimale su tutti i dispositivi. Queste sono quelle che ho utilizzo personalmente, facili da usare e che mi permettono di progettare siti web in modo efficace su qualsiasi schermo.
Utilizzi anche tu queste Media Query? Se progetti con breakpoint differenti commenta con i tuoi!