Come utilizzare le media query in HTML e CSS per creare siti web reattivi

Se desideri sviluppare siti Web / applicazioni Web, sapere come creare progetti reattivi è essenziale per il tuo successo.

In passato, la creazione di siti Web che si adattassero bene a schermi di dimensioni diverse era un lusso che i proprietari di siti Web dovevano richiedere a uno sviluppatore. Tuttavia, l'aumento nell'uso di smartphone e tablet ha ora reso il responsive design una necessità nel mondo dello sviluppo software.

L'utilizzo di query multimediali è senza dubbio il modo migliore per garantire che il tuo sito web / app web appaia esattamente come desideri su ogni dispositivo.

Comprensione del responsive design

In poche parole, il design reattivo si occupa dell'utilizzo di HTML / CSS per creare un layout di sito Web / app Web che si adatta a varie dimensioni dello schermo. In HTML / CSS ci sono diversi modi per ottenere la reattività nella progettazione di un sito web:

• Utilizzo di unità rem ed em invece di pixel (px)
• Impostazione della visualizzazione / scala di ogni pagina web
• Utilizzo di media query

Una media query è una funzionalità dei CSS rilasciata nella versione CSS3. Con l'introduzione di questa nuova funzionalità, gli utenti dei CSS acquisiscono la possibilità di regolare la visualizzazione di una pagina Web in base all'altezza, alla larghezza e all'orientamento del dispositivo / schermo (modalità orizzontale o verticale).

Per saperne di più: Cheat Sheet delle proprietà CSS3 essenziali

Le media query forniscono un framework per creare codice una volta e utilizzarlo più volte nel programma. Questo potrebbe non sembrare così utile se stai sviluppando un sito web con solo tre pagine web, ma se stai lavorando per un'azienda con centinaia di pagine web diverse: questo si rivelerà un periodo enorme risparmiatore.

Ci sono molte cose diverse che devi prendere in considerazione quando usi le media query: struttura, posizionamento, intervallo e collegamento.

@media only / not media-type and (expression) {
/ * Codice CSS * /
}

La struttura generale di una media query include:

• La parola chiave @media
• La non / unica parola chiave
• Un tipo di supporto (che può essere schermo, stampa o parlato)
• La parola chiave "e"
• Un'espressione unica racchiusa tra parentesi
• Codice CSS racchiuso tra parentesi graffe aperte e chiuse.

Relazionato: Utilizzo dei CSS per formattare i documenti per la stampa

@media only screen e (larghezza massima: 450 px) {
corpo{
colore di sfondo: blu;
}
}

L'esempio precedente applica lo stile CSS (in particolare un colore di sfondo blu) solo agli schermi dei dispositivi che hanno una larghezza di 450 px e inferiore, quindi in pratica gli smartphone. La parola chiave "only" può essere sostituita con la parola chiave "not" e quindi lo stile CSS nella query multimediale sopra si applica solo alla stampa e alla sintesi vocale.

Tuttavia, per impostazione predefinita, una dichiarazione di media query generale si applica a tutti e tre i tipi di media, quindi non è necessario specificare un tipo di media a meno che lo scopo non sia quello di escluderne uno o più di essi.

/ * design per smartphone * /
@media (larghezza massima: 450 px) {
corpo{
colore di sfondo: blu;
}
}

Una media query è una proprietà CSS; può quindi essere utilizzato solo all'interno del linguaggio stilistico. Esistono tre modi diversi per includere CSS nel codice; tuttavia, solo due di questi metodi forniscono un modo pratico per includere query multimediali nei programmi: CSS interno o esterno.

Il metodo interno include l'aggiunta di

Il metodo esterno prevede la creazione di una media query in un file CSS esterno e il collegamento al file HTML tramite l'estensione etichetta.

Indipendentemente dal fatto che le media query vengano utilizzate tramite CSS interno o esterno, c'è un aspetto importante del linguaggio di stile che può influire negativamente sul funzionamento di una media query. CSS ha una regola di ordine di precedenza. Quando si utilizza un file Selettore CSS, o in questo caso una media query, ogni nuova media query aggiunta al file CSS sostituisce (o ha la precedenza) su quella precedente.

Il codice di media query predefinito che abbiamo sopra è indirizzato agli smartphone (450 px di larghezza e meno), quindi se si desidera impostare un sfondo diverso per i tablet potresti pensare di poter semplicemente aggiungere il seguente codice al tuo file CSS preesistente.

/ * design per tablet * /
@media (larghezza massima: 800 px) {
corpo{
colore di sfondo: rosso;
}
}

L'unico problema è che, a causa dell'ordine di precedenza, i tablet avrebbero un colore di sfondo rosso e gli smartphone ora avrebbero anche un colore di sfondo rosso perché 450px e meno sono sotto gli 800px.

Un modo per risolvere questo piccolo problema sarebbe aggiungere la media query per tablet prima di quella per smartphone; il secondo sovrascriverebbe il primo e ora avresti smartphone con uno sfondo blu e tablet con uno sfondo rosso.

Tuttavia, esiste un modo migliore per ottenere uno stile separato per smartphone e tablet senza preoccuparsi dell'ordine di precedenza. Questa è una funzionalità delle media query nota come specifica dell'intervallo, in cui lo sviluppatore può creare una media query con la larghezza massima e minima (l'intervallo).

/ * design per tablet * /
@media (larghezza massima: 800 px) e (larghezza minima: 451) {
corpo{
colore di sfondo: rosso;
}
}

Con l'esempio sopra, il posizionamento delle query multimediali all'interno di un foglio di stile diventa irrilevante poiché il design per tablet e smartphone ha come target due raccolte separate di larghezza.

Se non desideri incorporare query multimediali nel tuo codice CSS, esiste un metodo alternativo che puoi utilizzare. Questo metodo prevede l'utilizzo di media query in tag di un file HTML, quindi invece di avere un enorme foglio di stile che contiene le preferenze di stile per smartphone, tablet e computer: puoi utilizzare tre file CSS separati e creare le tue query multimediali in formato il etichetta.

Il tag è un elemento HTML utilizzato per importare lo stile CSS da un foglio di stile esterno. Questo tag ha una proprietà multimediale che funziona allo stesso modo di una query multimediale in CSS.

 foglio di stile principale 

 foglio di stile tablet 
href = "tablet.css">
 foglio di stile per smartphone 

Il codice sopra dovrebbe essere inserito nel file

tag del tuo file HTML. Ora tutto ciò che devi fare è creare tre file CSS separati con i nomi di file main.css, tablet.css e smartphone.css, quindi creare il design specifico che desideri per ciascun dispositivo.

Lo stile nel file principale verrà applicato a tutti gli schermi con una larghezza maggiore di 800 px, verrà applicato lo stile nel file tablet a tutti gli schermi con una larghezza compresa tra 450 px e 801 px e lo stile nel file dello smartphone verrà applicato a tutti gli schermi seguenti 451px.

Se sei arrivato alla fine di questo articolo, sei stato in grado di imparare cos'è il responsive design e perché è utile. È ora possibile identificare e utilizzare le media query nei file CSS e HTML. Inoltre, sei stato introdotto all'ordine di precedenza nei CSS e hai visto come potrebbe influenzare il funzionamento delle tue query multimediali.

Credito immagine: spazio negativo /Pexels

Come impostare un'immagine di sfondo in CSS

CSS è un potente strumento per lo styling delle pagine web. Imparare a posizionare un'immagine di sfondo ti insegna molte nozioni di base sui CSS.

Leggi Avanti

Circa l'autore