9 trucchi CSS avanzati per le query multimediali che dovresti conoscere
Per un certo periodo le query multimediali hanno consentito progettazioni reattive e adatte al dispositivo. Queste query più avanzate portano le cose al livello successivo.
Un'esperienza utilizzabile e accessibile è vitale per un sito Web di successo. Se i tuoi lettori hanno un'esperienza positiva, è più probabile che eseguano un invito all'azione, compreso l'acquisto di prodotti. È anche più probabile che ritornino o consiglino il tuo sito ad altri. L'esperienza è fondamentale.
Le query multimediali offrono diverse funzionalità CSS che possono personalizzare il tuo sito web. Ti consentono di personalizzare l'esperienza di ciascun utente in base alle capacità del suo dispositivo. Scopri come offrire ai tuoi lettori la migliore esperienza, sia che utilizzino il telefono o un monitor desktop di grandi dimensioni.
1. La funzione del puntatore
La regola @media dispone di una funzione di puntamento che ti consente di personalizzare il tuo design in base al dispositivo di puntamento principale. Puoi testare la disponibilità e la qualità.
Questa funzionalità di media query del puntatore accetta uno di tre valori: nessuno, grossolano o fine. Il valore none si applica quando non è presente alcun dispositivo di puntamento. Il valore coarse si applica quando il dispositivo di puntamento principale ha un livello di precisione ridotto. Inoltre, il valore fine si applica quando il dispositivo di puntamento principale ha un elevato livello di precisione.
Utilizzando la funzione puntatore
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="radio"] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}
input[type="radio"]:checked {
background: red;
}
@media (pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body>
<label for="options">Options to Choose From: </label>
<input type="radio" id="options" > Option One
<input type="radio" id="options" > Option Two
</body>
</html>
Il codice sopra genera due opzioni radio di ingresso, che varieranno in base alla precisione del dispositivo di puntamento principale di un computer.
Un computer dotato di un dispositivo di puntamento primario accurato (o di alta qualità) visualizzerà la seguente pagina Web:
Un computer dotato di un dispositivo principale con precisione limitata (o bassa qualità) visualizzerà la seguente pagina Web:
Il dispositivo che dispone di un dispositivo di puntamento primario con un livello di precisione limitato dispone di pulsanti di opzione più grandi. Ciò offre un'esperienza utente migliore per tali utenti. Con la funzione puntatore puoi garantire a tutti i tuoi utenti un'esperienza piacevole, indipendentemente dal loro dispositivo.
2. La caratteristica del puntatore qualsiasi
Come la funzionalità del puntatore, la funzionalità di media query con qualsiasi puntatore prende di mira i dispositivi di puntamento. Tuttavia, la funzionalità any-pointer valuta ogni dispositivo di puntamento di un computer. La funzione puntatore qualsiasi utilizza anche i valori none, coarse e fine.
Utilizzando la funzionalità puntatore qualsiasi
@media (any-pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (any-pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
Puoi semplicemente sostituire il codice sopra con la sezione media query del codice nell'esempio della funzionalità puntatore. Il codice riportato sopra esegue il rendering di una visualizzazione appropriata in base alla qualità di qualsiasi dispositivo di puntamento che un computer potrebbe avere.
3. La funzione al passaggio del mouse
La funzionalità di query multimediale al passaggio del mouse valuta se il meccanismo di input primario di un dispositivo è in grado di passare il mouse sugli elementi in un'interfaccia utente.
Utilizzando la funzione al passaggio del mouse
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!-- HTML -->
<a href="#"> A link element</a>
Il codice sopra mostrerà un elemento . Cambierà colore (da nero a blu) ogni volta che il meccanismo di input principale di un dispositivo (che supporta il passaggio del mouse) passa sopra di esso.
4. La funzionalità “al passaggio del mouse”.
La media query al passaggio del mouse prende di mira qualsiasi meccanismo di input, incluso il meccanismo di input primario.
Utilizzando la funzione al passaggio del mouse
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
La media query sopra produce un effetto hover per qualsiasi meccanismo di input in grado di passare il mouse sopra un elemento.
5. La funzione di risoluzione
La funzione di media query di risoluzione calcola il numero di pixel visualizzati da un dispositivo specifico. Un dispositivo che visualizza più pixel per pollice ha una risoluzione migliore perché visualizza le immagini con maggiori dettagli. Questa funzionalità può aiutare uno sviluppatore a decidere quali utenti del dispositivo potrebbero vedere più chiaramente gli elementi in un'interfaccia utente.
La funzione di risoluzione utilizza l'intervallo. Ciò significa che oltre a utilizzare la parola chiave risoluzione, puoi utilizzare risoluzione minima e risoluzione massima. La funzionalità di risoluzione delle query multimediali appartiene al tipo di dati di risoluzione. Ciò significa che la caratteristica di risoluzione è misurabile in una delle tre unità: punti per pollice (dpi), punti per centimetro (dpcm) o punti per pixel (dppx).
Utilizzando la funzione di risoluzione
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
La risoluzione più bassa che un dispositivo può avere pur visualizzando immagini di qualità è 72 dpi. Pertanto, se un dispositivo ha una risoluzione di 72 dpi o più, visualizzerà il seguente output nel suo browser:
6. La funzione di orientamento
L'area visibile del dispositivo può avere solo uno dei due orientamenti: verticaleoorizzontale. Tieni presente che l'orientamento della vista è diverso dall'orientamento del dispositivo. Se un dispositivo utilizza una tastiera virtuale, la sua visualizzazione potrebbe cambiare da verticale a orizzontale mentre il dispositivo stesso è ancora in posizione verticale.
Utilizzando la funzione di orientamento
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
<!-- HTML -->
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
Il codice sopra cambia il layout di una pagina web in base all'orientamento di un dispositivo.
Un dispositivo con un viewport in modalità orizzontale visualizzerà la seguente pagina Web:
Un dispositivo con un viewport in modalità verticale visualizzerà la seguente pagina web:
7. La caratteristica dell'altezza
La funzionalità di query dell'altezza multimediale ti consente di specificare lo stile CSS in base all'altezza del viewport del dispositivo di un utente. Questa funzione supporta l'intervallo, quindi puoi utilizzare anche le parole chiave altezza minima e altezza massima.
Utilizzando la funzione altezza
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Il codice sopra personalizza ciò che vede un utente in base all'altezza del proprio dispositivo. Gli utenti con un'altezza del dispositivo pari o superiore a 360 px vedranno qualcosa di simile alla seguente pagina web:
I dispositivi con un'altezza inferiore a 360 px non visualizzeranno il bordo attorno al paragrafo nella pagina web.
8. La caratteristica della larghezza
La funzionalità di query multimediali di larghezza ti consente di creare stili CSS specifici in base alla larghezza del viewport del dispositivo di un utente. Questa funzione supporta anche l'intervallo, quindi hai la possibilità di utilizzare le parole chiave larghezza minima e larghezza massima.
Utilizzando la funzione larghezza
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Il codice sopra personalizza ciò che vede un utente in base alla larghezza del proprio dispositivo. Gli utenti con una larghezza del dispositivo pari o superiore a 600 px vedranno qualcosa di simile alla seguente pagina web:
L'utilizzo di query multimediali basate su larghezza e altezza può essere una strategia efficace per rendere il tuo sito web reattivo.
9. La caratteristica del colore
La funzionalità di query multimediale a colori valuta il componente di colore di un dispositivo (rosso, verde, blu). Il valore si riferisce a quanti bit utilizza un display per ciascun componente, che definisce quanti colori diversi può mostrare. I dispositivi moderni utilizzano in genere un display a 24 bit che utilizza otto bit per componente di colore. Richiede anche un valore intero, dove un dispositivo incolore è zero.
La funzione colore utilizza anche gli intervalli min-color e max-color .
Utilizzando la funzione colore
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
I dispositivi con una componente di colore pari o superiore a sette visualizzeranno il seguente output nei loro browser:
Ora puoi creare esperienze utente uniche
Dovresti essere in grado di utilizzare queste query multimediali avanzate per migliorare l'esperienza di ciascun utente che visita il tuo sito Web o la tua applicazione. È importante offrire agli utenti mobili e agli utenti desktop un'esperienza altrettanto positiva sul tuo sito.
Le media query non sono gli unici strumenti CSS che possono rafforzare le tue capacità di sviluppatore.