I designer possono adattare il design alle esigenze degli utenti. L'esempio più chiaro è il fattore di forma del dispositivo di un utente. la sua larghezza, le proporzioni del dispositivo e così via. Utilizzando le query supporti, i designer possono rispondere a questi diversi fattori di forma.
Le query supporti vengono avviate con la parola chiave @media (una regola at-rule di CSS) e possono essere utilizzate per una serie di casi d'uso.
Scegli come target diversi tipi di output
I siti web vengono spesso visualizzati sugli schermi, ma i CSS possono essere utilizzati anche per applicare uno stile ai siti web anche per altri output. Potresti volere che le pagine web abbiano un solo aspetto sullo schermo ma diverso quando vengono stampate. Ciò è possibile grazie all'esecuzione di query sui tipi di contenuti multimediali.
In questo esempio, il colore di sfondo è impostato su grigio. Tuttavia, se la pagina viene stampata, il colore di sfondo deve essere trasparente. In questo modo viene salvato l'inchiostro della stampante dell'utente.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
Puoi utilizzare la regola at @media nel foglio di stile in questo modo,
oppure creare un foglio di stile separato e utilizzare l'attributo media su un elemento link:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
Se non specifichi nessun tipo di media per il tuo CSS,
il tipo di media sarà automaticamente all. Questi due blocchi di CSS sono equivalenti:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
Anche queste due righe di codice HTML sono equivalenti:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
Condizioni per le query
Puoi aggiungere condizioni ai tipi di media. In questo caso, si parla di query supporti. Il CSS viene applicato solo se il tipo di media corrisponde e anche la condizione è true. Queste condizioni sono chiamate funzionalità multimediali.
Questa è la sintassi per le query supporti:
@media type and (feature)
Puoi utilizzare query supporti su un elemento link se gli stili si trovano in un foglio di stile separato:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
Supponiamo di voler applicare stili diversi a seconda che la finestra del browser sia in modalità Orizzontale
(la larghezza dell'area visibile è maggiore dell'altezza) o in modalità Ritratto
(l'altezza dell'area visibile è maggiore della larghezza).
È disponibile una funzionalità multimediale chiamata orientation che puoi utilizzare per verificare che:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
In alternativa, se preferisci avere fogli di stile separati:
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
In questo caso, il tipo di elemento multimediale è all. Poiché questo è il valore predefinito, puoi ometterlo se vuoi:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
In alternativa, utilizzando fogli di stile separati:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
Utilizzando fogli di stile separati per diversi tipi di media, come print, potrebbe essere consentito,
è probabile che non sia una buona idea utilizzare un foglio di stile separato per ogni query multimediale. Utilizza invece le regole at-rule @media.
Regola gli stili in base alle dimensioni dell'area visibile
Per il responsive design, una delle funzionalità multimediali più utili riguarda le dimensioni dell'area visibile del browser.
Per applicare gli stili quando la finestra del browser è più larga di una determinata larghezza, utilizza min-width.
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
Utilizza la funzionalità dei contenuti multimediali di max-width per applicare stili inferiori a una determinata larghezza:
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
Puoi utilizzare qualsiasi unità di lunghezza CSS nelle query supporti.
Se i tuoi contenuti si basano prevalentemente sulle immagini, i pixel potrebbero essere la soluzione più sensata.
Se i tuoi contenuti sono prevalentemente basati su testo,
probabilmente è più sensato utilizzare un'unità relativa basata sulle dimensioni del testo, come em o ch:
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
Puoi anche combinare query supporti per applicare più di una condizione.
Utilizza la parola and per combinare le query supporti:
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
Scegli i punti di interruzione in base ai contenuti
Il punto in cui una condizione di funzionalità multimediali diventa vera è chiamato punto di interruzione. È preferibile scegliere i punti di interruzione in base ai contenuti, piuttosto che alle dimensioni dei dispositivi più comuni, poiché possono cambiare con ogni ciclo di rilascio della tecnologia.
In questo esempio, 50em è il punto in cui le righe di testo diventano troppo lunghe.
Viene quindi creato un punto di interruzione per rendere l'interfaccia più leggibile.
Utilizzando la proprietà column-count, da quel momento in poi il testo viene diviso in due colonne.
@media (min-width: 50em) {
article {
column-count: 2;
}
}
Combinazioni
Puoi usare query supporti in base all'altezza dell'area visibile, non solo alla larghezza. Questo può essere utile per ottimizzare i contenuti dell'interfaccia "above the fold". Nell'esempio precedente, se i lettori usano una finestra del browser ampia ma corta, devono scorrere verso il basso di una colonna e poi scorrere di nuovo verso l'alto per arrivare alla parte superiore della seconda colonna. Sarebbe più sicuro applicare le colonne solo quando l'area visibile è sufficientemente larga e alta.
Puoi combinare le query supporti in modo che gli stili vengano applicati solo quando tutte le condizioni sono vere.
In questo esempio, l'area visibile deve essere larga almeno 50em e alta almeno 60em per consentire l'applicazione degli stili delle colonne.
Questi punti di interruzione sono stati scelti in base alla quantità di contenuti.
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
Questi esempi mostrano come le query supporti possano essere utilizzate per adattare i progetti al fattore di forma del dispositivo di un utente. ma questi rappresentano solo la superficie delle possibilità. Le query supporti possono andare ben oltre la larghezza e l'altezza, accesso alle preferenze dell'utente relative alle funzioni di accessibilità e ai colori dei temi. L'utilizzo di query supporti per apportare modifiche al layout è un ottimo inizio per creare un responsive design, che si basa su queste e altre funzionalità.
Verifica le tue conoscenze
Verifica le tue conoscenze in materia di query multimediali adattabili.
Le query supporti esistono solo per le dimensioni dello schermo?
Le schermate sono l'unico luogo in cui i contenuti web vengono fruiti o visualizzati?
Il tipo di media predefinito è?
screenscreen non è il tipo predefinito.nonenone non è un tipo di media valido.allsomesome non è un tipo di media valido.landscapelandscape non è un tipo di media valido.Cosa potresti usare per impedire al browser di scalare un progetto sui dispositivi mobili?
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">Quale query multimediale viene applicata quando la finestra del browser è sopra 720px.
@media (width: 720px)720px.@media (max-width: 720px)720px.@media (min-width: 720px)720px.@media (clamp-width: 720px)clamp-width non è una condizione valida per la funzionalità di query supporti.