9 Trucchi CSS avanzati per le query multimediali che dovresti conoscere

Un'esperienza fruibile e accessibile è vitale per un sito web di successo. Se i tuoi lettori hanno un'esperienza positiva, è più probabile che effettuino un invito all'azione, compreso l'acquisto di prodotti. È anche più probabile che tornino o raccomandino 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 ogni 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 caratteristica del puntatore

Il @regola dei media ha una funzione di puntatore che ti consente di personalizzare il tuo design in base al dispositivo di puntamento principale. Puoi testare la disponibilità e la qualità.

Questo puntatore funzione di interrogazione multimediale assume uno dei tre valori: nessuno, grossolano o fine. Il nessuno il valore si applica quando non è presente alcun dispositivo di puntamento. Il

grossolano valore si applica quando il dispositivo di puntamento primario ha un livello di precisione ridotto. E il bene valore si applica quando il dispositivo di puntamento primario ha un alto livello di precisione.

Usando la caratteristica del puntatore

Opzioni tra cui scegliere: 
 Opzione uno
 Opzione due

Il codice sopra genera due opzioni radio di input, che varieranno in base alla precisione del dispositivo di puntamento primario di un computer.

Un computer dotato di un dispositivo di puntamento primario accurato (o di alta qualità) visualizzerà la seguente pagina Web:

Un computer che dispone di un dispositivo principale con precisione limitata (o bassa qualità) visualizzerà la seguente pagina Web:

Il dispositivo che dispone di un dispositivo di puntamento principale con un livello di precisione limitato ha pulsanti di opzione più grandi. Ciò offre una migliore esperienza utente per tali utenti. Con la funzione puntatore, puoi assicurarti che tutti i tuoi utenti abbiano un'esperienza piacevole, indipendentemente dal loro dispositivo.

2. La caratteristica del puntatore qualsiasi

Come la funzione del puntatore, la funzione di query multimediale a puntatore qualsiasi è rivolta ai dispositivi di puntamento. Tuttavia, la funzione any-pointer valuta ogni dispositivo di puntamento di un computer. La funzione any-pointer utilizza anche il nessuno, grossolano, e bene i valori.

Utilizzo della funzione puntatore qualsiasi

 @media (qualsiasi puntatore: bene) {
 input[tipo="radio"] {
 larghezza: 15px;
 altezza: 15px;
 raggio di confine: 20px;
 larghezza del bordo: 1px;
 }
 }
@media (qualsiasi puntatore: grossolano) {
 input[tipo="radio"] {
 larghezza: 25px;
 altezza: 25px;
 raggio di confine: 20px;
 larghezza del bordo: 2px;
 }
 }

Puoi semplicemente sostituire il codice sopra con la sezione media query del codice nell'esempio della funzione del puntatore. Il codice sopra rende una visualizzazione appropriata in base alla qualità di qualsiasi dispositivo di puntamento che potrebbe avere un computer.

3. La funzione al passaggio del mouse

La funzionalità di query multimediale al passaggio del mouse valuta se il meccanismo di input principale di un dispositivo è in grado di passare sopra gli elementi in un'interfaccia utente.

Utilizzo della funzione al passaggio del mouse

 /* CSS */
 un{
 decorazione del testo: nessuna;
 colore nero;
 }
 @media (passa con il mouse: passa con il mouse) {
 a: passa il mouse {
 colore blu;
 }
 }
 HTML 
 Un elemento di collegamento

Il codice sopra visualizzerà 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 funzione qualsiasi al passaggio del mouse

Il qualsiasi-hover media query si rivolge a qualsiasi meccanismo di input, incluso il meccanismo di input primario.

Utilizzo della funzione di passaggio al passaggio del mouse

@media (al passaggio del mouse: passa il mouse) {
 a: passa il mouse {
 colore blu;
 }
 }

La query multimediale sopra produce un effetto al passaggio del mouse per qualsiasi meccanismo di input in grado di passare sopra un elemento.

5. La funzione di risoluzione

La funzione di risoluzione media query 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 funzione può aiutare uno sviluppatore a decidere quali utenti del dispositivo potrebbero visualizzare gli elementi in un'interfaccia utente in modo più chiaro.

La funzione di risoluzione utilizza la gamma. Ciò significa che oltre a utilizzare il risoluzione parola chiave, puoi usare risoluzione minima e risoluzione massima. La funzione di risoluzione delle query multimediali appartiene al tipo di dati di risoluzione. Ciò significa che la funzione di risoluzione è misurabile in una delle tre unità: punti per pollice (dpi), punti per centimetro (dpcm) o punti per pixel (dppx).

Utilizzo della funzione di risoluzione

/* CSS */
@media (risoluzione minima: 72 dpi) {
 P {
 colore bianco;
 colore di sfondo: blu;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

La risoluzione più bassa che un dispositivo può avere e continuare a visualizzare immagini di qualità è 72 dpi. Quindi, se un dispositivo ha una risoluzione di 72 dpi o più, visualizzerà il seguente output nel suo browser:

6. La caratteristica di orientamento

Una finestra del dispositivo può avere solo uno dei due orientamenti: ritratto o paesaggio. Si noti che l'orientamento di una finestra è diverso dall'orientamento di un dispositivo. Se un dispositivo utilizza una tastiera software, il suo riquadro di visualizzazione potrebbe cambiare da verticale a orizzontale mentre il dispositivo stesso è ancora in posizione verticale.

Utilizzo della funzione di orientamento

/* CSS */
 corpo{
 display: flessibile;
 }
 sezione{
 bordo: 2px blu fisso;
 imbottitura: 3px;
 margine: 3px;
 }
 @media (orientamento: paesaggio) {
 corpo {
 direzione flessibile: riga;
 }
 }
@media (orientamento: ritratto) {
 corpo {
 direzione flessibile: colonna;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Il codice sopra cambia il layout di una pagina web in base all'orientamento di un dispositivo.

Un dispositivo con una finestra in modalità orizzontale visualizzerà la seguente pagina Web:

Un dispositivo con un viewport in modalità verticale visualizzerà la seguente pagina web:

7. L'altezza Caratteristica

La funzione di query del supporto di altezza consente di specificare lo stile CSS in base all'altezza del viewport del dispositivo di un utente. Questa funzione supporta la gamma, quindi puoi anche utilizzare il altezza minima e altezza massima parole chiave.

Utilizzando la funzione di altezza

 /* CSS */
 @media (altezza minima: 360px) {
 P{
 bordo: 2px rosso arancio punteggiato;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Il codice sopra personalizza ciò che un utente vede in base all'altezza del suo dispositivo. Gli utenti con un'altezza del dispositivo pari o superiore a 360 pixel vedranno qualcosa di simile alla seguente pagina Web:

I dispositivi con un'altezza inferiore a 360px non visualizzeranno il bordo attorno al paragrafo sulla pagina web.

8. La caratteristica larghezza

La funzione di query sui supporti di larghezza consente di creare uno stile CSS specifico in base alla larghezza del viewport del dispositivo di un utente. Questa funzione supporta anche la gamma, quindi hai la possibilità di utilizzare il larghezza minima e larghezza massima parole chiave.

Utilizzo della funzione Larghezza

 /* CSS */
 @media (larghezza minima: 600px) {
 P{
 bordo: 2px viola solido;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Il codice sopra personalizza ciò che un utente vede in base alla larghezza del proprio dispositivo. Gli utenti con una larghezza del dispositivo di 600px e più vedranno qualcosa come la seguente pagina web:

L'utilizzo di media query basate su larghezza e altezza può essere una strategia efficace rendere reattivo il tuo sito web.

9. La caratteristica del colore

La funzione di query sui supporti a colori valuta la componente di colore di un dispositivo (rosso, verde, blu). Il valore si riferisce a quanti bit utilizza un displaye per ogni 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. Prende anche un valore intero, dove un dispositivo incolore è zero.

La funzione colore utilizza anche il colore minimo e colore massimo intervalli.

Utilizzo della funzione colore

 /* CSS */
 @media (colore minimo: 7) {
 P{
 bordo: 2px verde pieno;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

I dispositivi con una componente di colore da sette in su 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 ogni utente che visita il tuo sito Web o applicazione. È importante offrire agli utenti mobili e 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.

8 suggerimenti e trucchi CSS essenziali che ogni sviluppatore dovrebbe conoscere

Leggi Avanti

Circa l'autore