Il responsive è l’approccio alla progettazione del layout di una pagina web in funzione di tutti i device che use- remo per navigare il sito.

Non esiste più una versione del sito per il cellulare e una per il desktop, ma lo stesso sito si adatterà in maniera “liquida” al device.

L’uso dei cellulari per la navigazione su internet è di gran lunga superiore a quello di un computer desktop, quindi è buona norma approcciare la progettazione con una logica  “mobile first”, ovvero al contrario di come si faceva prima, progettare il sito per il mobile per poi adattarlo al formato desktop.

In questo caso ci vengono in aiuto i Media Query

I Media Query sono “contenitori” di regole CSS che vengono attivate solo oltre una larghezza definita.
Questa larghezza viene chiamata BREAKPOINT
I breakpoint identificano il tipo di dispositivo e applicano istruzioni CSS differenti.

Esempio:

<style>
.mybox{width: 100%}

@media screen and (min-width:576px) {
.mybox{width: 50%}
}

@media screen and (min-width:768px) {
.mybox{width: 33.333333%}
}

@media screen and (min-width:992px) {
.mybox{width: 25%}
}
</style>