Molto spesso, frequentando qualche forum, si ci sente rispondere che per risolvere una questione di cattiva visione su un determinato monitor occorre utilizzare le media query, in questo articolo vediamo come farlo.
Vediamo in questo articolo cosa sono le media query e come possiamo usarle per rendere più gradevole ed usabile il nostro sito
Le Media Queries 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.
Siamo abituati ad usare la parola "template responsive" senza capire l'effettivo significato del termine e la differenza che c'è fra vedere bene ed adattare.
Il template responsive ci adatta i contenuti a secondo della larghezza dello schermo, ma se non abbiamo le media query che ne stabiliscono i range d'intervento, quelli che tecnicamente chiamiamo "breack point", questo adattamento elastico spesso è incoerente con l'idea che avevamo in testa. Le situazioni di incoerenza che si verificano sono moltissime, immaginate il testo dell'articolo che si adatti elasticamente al content, ma immaginate anche la foto abbinata rimanga della stessa grandezza in tutti i dispositivi/schermi. Una tragedia greca per alcuni!
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 query sono delle dichiarazioni che lavorano dentro i CSS 3.0 e sono state introdotte nel maggio del 2010 da Ethan Marcotte che ha introdotto il Responsive Web design. Le media query sono parte integrante degli standard CSS 3.0 e sono principalmente utilizzate per trasformare un sito web adattabile a tutte le risoluzioni del browser, oppure per ottenere una versione di stampa ideale del sito web con uno stile differente rispetto a quello utilizzato per gli schermi.
Utilizzare una media query significa voler forzare un comportamento in base alla risoluzione del monitor, ad esempio potremmo avere un menù orizzontale che ad una risoluzione dello schermo inferiore, manda a capo una o due voci di menù, le media queris in questo caso ci potrebbero aiutare scrivendo un comportamento più opportuno della zona che vogliamo controllare, scrivendo delle regole css che abbiamo meno padding, meno margin o una dimensione del font più piccola.
Ad esempio la regola seguente fa in modo che uno schermo largo max 768px abbia una font grande 12px, ed uno schermo largo 1280px abbia un font grande 14px
@media screen and (width: 768px) {.tua-classe{font-size:12px}}@media screen and (width: 1280px) {.tua-classe {font-size: 14px}}
Media Queris approfondiamo un pò e vediamo come agire in casi più simili alle nostre reali necessità
Ci sono alcuni modi per usare le media query, che potrebbero cambiare in base alle nostre necessità o in base alla complessività del nostro progetto, ad esempio potremmo avere un file css per ogni range di risoluzione (soluzione molto articolata utile per siti che utilizzano diversi schemi di impaginazione), quindi avere un file dedicato alle risoluzioni per smartphone, uno alle risoluzioni per tablet ed uno per risoluzioni desktop.
In questo caso sarà necessario inserire fra i tag <head> della nostra pagina html le classiche stringhe che ne richiamino i file, ad esempio:
@media screen and (width: 768px) {.tua-classe{font-size:12px}}@media screen and (width: 1280px) {.tua-classe {font-size: 14px}}
Per joomla le stringhe andranno inserite nel file index.php del template (per i template che girano su framework potrebbero andare inseriti altrove), e le stringhe vanno scritte così:
<link type="text/css" rel="stylesheet" media=”(max-width: 320px)” href="/baseurl ?>/templates/template; ?>/css/style320.css" /><link type="text/css" rel="stylesheet" media=”(max-width: 640px)” href="/baseurl ?>/templates/template; ?>/css/style640.css" /><link type="text/css" rel="stylesheet" media=”(max-width: 768px)” href="/baseurl ?>/templates/template; ?>/css/style768.css" />
Un altro metodo di utilizzo è quello di scrivere direttamente le dichiarazioni media query nel file css principale del sito o tutte in un unico file evitando di avere file separati. In questo link troverete alcune informazioni sull'utilizzo dei css e le sovrascritture
Io in questa guida sceglierò di scrivere le dichiarazioni media query che riguarderanno tutte le risoluzioni in un unico file separato, quindi inseriro fra i tag <head> una sola chiamata al file, quella sottostante per siti in puro html:
<link rel=”stylesheet” media=”all” href=”css/medias.css” />
oppure se utilizzerò joomla userò la stringa seguente:
<link type="text/css" rel="stylesheet" media=”all” href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/media.css" />
Quindi creerò un file chimato media.css che posizionerò nella cartella dei css, al suo interno inizierò a dichiarare le dimensioni degli schermi standard o più correttamente dei media che intenderò utilizzare.
@media (min-width: 1601px) and (max-width: 1893px) {}@media (min-width: 1571px) and (max-width: 1600px) {}@media (min-width: 1429px) and (max-width: 1570px) {}@media (min-width: 1281px) and (max-width: 1428px) {}@media (min-width: 1201px) and (max-width: 1280px) {}@media (min-width: 1025px) and (max-width: 1200px) {}@media (min-width: 901px) and (max-width: 1024px) {}@media (min-width: 801px) and (max-width: 900px) {}@media (min-width: 769px) and (max-width: 800px) {}@media (min-width: 601px) and (max-width: 768px) {}@media (min-width: 481px) and (max-width: 600px) {}@media (min-width: 321px) and (max-width: 480px) {}@media (min-width: 300px) and (max-width: 320px) {}
Questa regola un pò più complessa, ma molto più efficace, dice semplicemente:
usa queste regole per gli schermi che vanno da (1025px) a (1200px) {/***di seguito la specifica regola CSS***/.classe-elemento {color:rosso;}}
Con la regola appena scritta abbiamo capito tutta la potenza e la portata di queste regole, potendo cucire su misura il nostro sito su schermi di qualsiasi dimensione
Vediamo adesso altre regole specifiche che potrebbero tornarci utili nella realizzazione o correzione del nostro template
La regola seguente fa in modo 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: red;}}
La regola successiva fa uso delle proprietà landscape e portrait, utili perchè 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.
/* Portrait */@media only screenand (min-device-width: 320px)and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {}/* Landscape */@media only screenand (min-device-width: 320px)and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {}
Spero che questa guida vi sia stata di aiuto, e se ritenete di potermi ringraziare offrendomi un caffè cliccate pure nel pulsante sottostante o su di un banner