Il responsive web design è un approccio alla creazione di pagine Web in cui tali pagine possono modificare dinamicamente il layout e l'aspetto in base alle dimensioni dello schermo di un visitatore. Gli schermi di grandi dimensioni possono ricevere un layout adatto a questi schermi più grandi, mentre i dispositivi più piccoli, come i telefoni cellulari, possono ricevere lo stesso sito Web formattato in modo adatto per lo schermo più piccolo. Questo approccio offre un'esperienza utente migliore per tutti gli utenti e può anche aiutare a migliorare il posizionamento nei motori di ricerca. Una parte importante del responsive web design è la query sui media CSS.
Le Media Query sono come piccole dichiarazioni condizionali all'interno del file CSS del tuo sito web, che ti permettono di impostare determinate regole CSS che diventeranno effettive solo dopo aver soddisfatto una determinata condizione, come quando una dimensione dello schermo è al di sopra o al di sotto di determinate soglie.
Media query in azione
Quindi come usi Media Queries su un sito web? Ecco un esempio molto semplice:
- Inizierai con un documento HTML ben strutturato, libero da qualsiasi stile visivo (questo è il significato del CSS)
- Nel tuo file CSS, inizieresti come fai normalmente disegnando la pagina e impostando una linea di base su come apparirà il sito. Supponiamo che tu voglia che la dimensione del carattere della pagina sia 16 pixel, potresti scrivere questo CSS:
body {font-size: 16px; }
- Ora, potresti voler aumentare quella dimensione del carattere per schermi più grandi che hanno ampi spazi per farlo. Questo è il caso in cui le Media Query entrano in gioco. Avvierai una Media Query come questa:
@media screen e (min-width: 1000px) {}
- Questa è la sintassi di una Media Query. Inizia con @media per stabilire Media Query. Successivamente, si imposta il "tipo di supporto", che in questo caso è "schermo". Questo vale per schermi di computer desktop, tablet, telefoni, ecc. Infine, si termina Media Query con la "funzione multimediale". Nel nostro esempio sopra, questo è "mid-width: 1000px". Ciò significa che Media Query eseguirà l'avvio per display con una larghezza minima di 1000 pixel di larghezza.
- Dopo questi elementi di Media Query, aggiungi una parentesi graffa aperta e chiusa simile a quella che faresti in una normale regola CSS.
- Il passaggio finale a una Media Query consiste nell'aggiungere le regole CSS che si desidera applicare una volta soddisfatta questa condizione. Aggiungi queste regole CSS tra le parentesi graffe che compongono la Media Query, in questo modo:
@media screen e (min-width: 1000px) {body {font-size: 20px; }
- Quando le condizioni di Media Query sono soddisfatte (la finestra del browser è larga almeno 1000 pixel), questo stile CSS avrà effetto, cambiando la dimensione del carattere del nostro sito dai 16 pixel che abbiamo stabilito in origine al nostro nuovo valore di 20 pixel.
Aggiungere più stili
È possibile inserire tutte le regole CSS all'interno di questa Media Query in base alle esigenze per regolare l'aspetto visivo del sito Web. Ad esempio, se si desidera non solo aumentare la dimensione del carattere a 20 pixel, ma anche modificare il colore di tutti i paragrafi in nero (# 000000), è possibile aggiungere questo:
@media screen e (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}
Aggiunta di più query multimediali
Inoltre, puoi aggiungere più Media Queries per ogni dimensione più grande, aggiungendole al tuo foglio di stile come questo:
@media screen e (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen e (min-width: 1400px) {body {font-size: 24px; }}
Le prime Media Queries entrerebbero in gioco con una larghezza di 1000 pixel, cambiando la dimensione del carattere a 20 pixel. Quindi, una volta che il browser superava i 1400 pixel, la dimensione del carattere cambiava nuovamente a 24 pixel. È possibile aggiungere tutte le query multimediali necessarie per il proprio sito Web specifico.
Min-Width e Max-Width
Ci sono generalmente due modi per scrivere Media Query - usando "min-width" o con "max-width". Finora, abbiamo visto "min-width" in azione. Ciò fa sì che Media Queries abbia effetto quando il browser ha raggiunto almeno la larghezza minima. Quindi una query che utilizza "min-width: 1000px" verrà applicata quando il browser è largo almeno 1000 pixel. Questo stile di Media Query viene utilizzato quando si costruisce un sito in modo "mobile-first".
Se si utilizza "max-larghezza", funziona in modo opposto. Una Media Query di "max-larghezza: 1000px" si applicherebbe una volta che il browser è sceso al di sotto di questa dimensione.
Per quanto riguarda i browser più vecchi
Una sfida con Media Queries è la mancanza di supporto nelle versioni precedenti di Internet Explorer. Fortunatamente, sono disponibili polifivaggi che possono applicare patch di supporto per Media Query in quei browser più vecchi, permettendoti di usarli sui siti web di oggi, assicurando comunque che la visualizzazione di quel sito non sembri infranta nei vecchi browser.
A cura di Jeremy Girard il 24/4/17
7
