Responsive web design o design reattivo: come ottimizzare il design per i diversi dispositivi
Si parla tanto in questo momento di responsive web design ed sicuramente interessante approfondire l’argomento. Infatti con la diffusione degli smartphone, dei tablet, dei device quindi con formati diversi è necessario sviluppare un design che non salti quando viene fruito da un dispositivo differente.
Settare le grandezze tutte in percentuale anzicchè fisse è sicuramente una buona cosa ma non basta, quindi ci vengono in aiuto i css con le media query che rilevano le caratteristiche dei media.
Con le media query è possibile integrare nei css dichiarazioni condizionali per applicare stili differenti in base ad esempio alla dimensione del dispositivo, all’orientamento, alle proporzioni. Questa è la sintassi delle media query:
@media [not|only] type [and] expression{
.stili
}
Per creare l’espressione condizionale usiamo le parole chiave not, only, and, or, ma vediamo alcuni esempi
@media not screen and (min-width:600px)
Oppure
@media screen and (min-width:600px) and (max-width:1200px)
Le media query si possono usare sia all’interno dei css che come attributo media dell’elemento link:
<link rel="stylesheet" href="stile.css" media=" screen and (min-width:600px)">
Un altro element importante del responsive design è la possibilità di adattare la larghezza in base alla larghezza della finestra utilizzando il seguente meta tag:
<meta name="viewport" content="width=device-width initial-scale=1">
Rimangono le immagini da adattare al dispositivo, questo si può fare settandole in percentuale anzicchè in dimensioni fisse e se proprio volessimo salvare la qualità delle immagini potremmo sovrapporre un livello di css con un valore overflow per ritagliarle, c’è da lavorarci….
KAAPTVQEY986
Related Posts
