Marco Menghini - Blog di Copywriting e Web DesignCoding Media Queries: la base del Responsive Web Design!

Media Queries: la base del Responsive Web Design!

“What is malleable is always superior to that which is immovable. This is the principle of controlling things by going along with them, of mastery through adaptation.” [cit. Lao Tzu]

La sfida più grande per un Web Designer è quella di rendere la propria pagina web adattabile a qualsiasi tipo di risoluzione. In effetti, se ci pensi, come può una stessa pagina essere visualizzata correttamente su un monitor da 27″ e su un tablet da 7″? Ecco perché è fondamentale nel Web Design conoscere il significato di Media Query.

Le Media Queries, infatti, permettono di richiamare determinate regole di stile, in base, per esempio, alla larghezza o all’altezza della finestra corrente del dispositivo di visualizzazione. In questo modo, si possono creare dei layout differenziati per risoluzione. E molte persone che si avvicinano per la prima volta a questo argomento tendono a snobbarlo. D’altronde, perché perdere tempo a scervellarsi quando esistono già delle soluzioni predefinite, tipo “The Semantic Grid System“, “Foundation by Zurb“, oppure “Twitter Bootstrap“, che permettono a chiunque di partire in quarta senza conoscenze approfondite? Giusto? Sbagliato!! Avere un’abilità che si basa esclusivamente sul codice creato da terzi è un ostacolo alla tua carriera. Per poter utilizzare un qualcosa, prima è importante capire il funzionamento che ci sta sotto, così da sapere con certezza quello che si sta facendo. Ecco perché, se vuoi dire di avere una conoscenza approfondita di Responsive Web Design (RWD), è necessario dare uno sguardo esteso alla sua spina dorsale: Media Query.

Media Queries

Cos’è una Media Query?

 

Per chi non conosce la funzionalità, la stessa viene utilizzata per diversificare le regole di stile a seconda del diverso tipo di supporto utilizzato. Tipi comunemente usati sono print, screen, speech, projection, braille e all. Nonostante l’utilità di ogni tipo di supporto, il nostro obiettivo è di orientarci verso il tipo screen. Per definizione, il valore screen è destinato principalmente agli schermi dei computer a colori, ed è il valore predefinito quando si lavora nel CSS.

Per utilizzare la Media Query è necessario inserirne i parametri all’interno del foglio di stile:

Esempi:

Regola che imposta lo sfondo di colore rosso sugli schermi del computer.

@media screen{
 body{background: #ff0000;}
 }

Regola che imposta lo sfondo di colore bianco in fase di stampa.

@media print{
 body{background: #fff;}
 }
I parametri di Width.

 

Ora è il momento di dare un’occhiata a ciò che rende la tua pagina veramente Web Responsive: i parametri di width (larghezza). Se hai seguito tutto finora, avrai notato che @media screen è ciò che fa partire la nostra query, e gli attributi min- max- di width impostano i parametri dentro cui applicarne gli effetti. Quindi, tenendo ben presente questo, puoi richiamare diverse regole di stile in relazione alle diverse tipologie di risoluzione dello schermo. Nel mio esempio ho impostato i valori di min- max-width a 320px e 480px rispettivamente. Questo significa che ogni volta che il dispositivo di visualizzazione ha una larghezza dello schermo compresa tra i due parametri specificati, allora la query viene richiamata.

 

Device-Width.

 

Qualche volta ti sarà capitato di veder utilizzare la query con dei parametri di device-width piuttosto che width solamente. La differenza tra le due cose è che device-width rileva la larghezza effettiva del dispositivo, ignorando qualsiasi tipo di zoom.

@media screen
 and (min-device-width:320px)
 and (max-device-width:480px){
 body{background: blue;}
 }

Inizialmente, potresti non riuscire a capire la differenza rispetto all’utilizzo del semplice parametro min- e max-width. In verità, potrai rilevare più facilmente questo aspetto se provi a ridimensionare o zoomare la pagina all’interno del browser.

Orientamento.

 

Prima di concludere, ci terrei anche a menzionare i parametri di orientation, che ci permettono di differenziare le regole di stile in base all’orientamento corrente dello schermo. Abbiamo due proprietà: landscape e portrait, che ci permettono di cambiare il layout della pagina basandoci sull’orientamento del browser. Il browser o il dispositivo stesso determinano il tipo di orientamento, analizzando la larghezza e l’altezza della finestra. Infatti, se l’altezza è maggiore della larghezza, allora vengono applicate le regole contenute nella query portrait. Se, invece, la larghezza è maggiore dell’altezza, ci troviamo nella fattispecie del landscape.

A questo punto, non ti rimane che sbizzarrirti a provare tutte le soluzione che preferisci!

Per agevolarti in questo, di seguito ti posto alcune Media Query predefinite, a seconda della diversa tipologia di dispositivo di visualizzazione:

Cellulari (portrait and landscape)

@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
 /* Styles */
 }

Cellulari (landscape)

@media only screen
 and (min-width : 321px) {
 /* Styles */
 }

Cellulari (portrait)

@media only screen
 and (max-width : 320px) {
 /* Styles */
 }

PC e Notebook

@media only screen
 and (min-width : 1224px) {
 /* Styles */
 }

Monitor Extra-Large

@media only screen
 and (min-width : 1824px) {
 /* Styles */
 }

Samsung Galaxy S3

@media only screen
 and (-webkit-device-pixel-ratio: 2) {
 /* Styles */
 }

Samsung Galaxy S2

@media only screen
 and (device-width: 320px)
 and (device-height: 533px)
 and (-webkit-device-pixel-ratio: 1.5) {
 /* Styles */
 }

Apple iPhone 5

Soluzione n. 1

@media screen
 and (device-aspect-ratio: 40/71) {
 /* Styles */
 }

Soluzione n. 2

@media screen
 and (device-width: 320px)
 and (device-height: 568px)
 and (-webkit-device-pixel-ratio: 2){
 /* Styles */
 }

Apple iPhone4

@media only screen
 and (-webkit-min-device-pixel-ratio : 1.5),
 only screen
 and (min-device-pixel-ratio : 1.5) {
 /* Styles */
 }

Apple iPad 3

Soluzione n. 1

@media only screen (max-device-width: 768px)
 and (orientation: portrait) {
 /* Styles */
 }

Soluzione n. 2

@media only screen (max-device-width: 1024 px)
 and (orientation: portrait) {
 /* Styles */
 }

Blackberry Playbook

Soluzione n. 1

@media only screen (max-device-width: 600px)
 and (orientation: portrait) {
 /* Styles */
 }

Soluzione n. 2

@media only screen (max-device-width: 1024 px)
 and (orientation: portrait) {
 /* Styles */
 }

Google Nexus 7

@media only screen
 and (device-width: 600px)
 and (device-height: 905px)
 and (-webkit-min-device-pixel-ratio: 1.331)
 and (-webkit-max-device-pixel-ratio: 1.332) {
 /* Styles */
 }

Se hai qualche suggerimento in merito o conosci degli snippet di codice predefiniti per altri dispositivi, non esitare a postare il tuo commento qui sotto!

Keep in touch!

No Comments

Leave a reply