Quando si progetta un sito Web reattivo, lo sviluppatore Web desidera modificare la struttura del layout Web in base al dispositivo utilizzandolo. CSS consente ai suoi utenti di eseguire questa attività utilizzando la regola @media che utilizza le query multimediali per modificare l'aspetto di un sito Web corrispondente al tipo di dispositivo. Per capire cos'è questa regola, leggi il seguente post. I soggetti evidenziati nel post sono i seguenti.

1. @Media Rule
2. Sintassi della regola @media
3. Tipi di media CSS
4. Tipi di funzionalità dei media

@Media Rule

Allo scopo di alterare l'aspetto di una pagina Web in base al dispositivo o ai supporti che la visualizza, viene utilizzata la regola @media. Questa regola utilizza le query multimediali per eseguire l'attività di cui sopra. Questa regola si rivela di grande utilità quando si sviluppa un sito Web reattivo.

Sintassi della regola @media

Ha la seguente sintassi.

Parole chiave spiegate

non: Inverte la semantica di una query multimediale.

soltanto: Impedisce alle vecchie versioni di un browser di implementare la query multimediale.

E: Combina un tipo di media con una determinata funzionalità multimediale.

Tipi Media CSS

Esistono un totale di quattro tipi di media che abbiamo fornito di seguito.

Tutto

È applicabile per tutti i tipi di dispositivi multimediali.

stampa

Questa query viene utilizzata specificamente per le stampanti.

schermo

Viene utilizzato per schermi di vari tipi di dispositivi come computer, laptop, telefoni cellulari, ecc.

discorso

Questa query è particolarmente utilizzata per i lettori di screening.

Tipi di funzionalità dei media

Abbiamo descritto alcune delle funzionalità dei media qui.

1. Any-hover

Questa funzione è stata inclusa nel livello 4 query multime.

Any-pointer

Ciò è stato incluso anche nel livello di query 4 e afferma che se un determinato meccanismo di input è un dispositivo di puntamento e, in tal caso, allora quanto è preciso?

proporzioni

Questa funzione definisce il rapporto tra la larghezza del vista e la sua altezza.

colore

Questa funzione specifica i componenti dei colori dei dispositivi di output.

gamut di colore

Questo definisce la gamma di colori che saranno supportati dai dispositivi di output.

indice colore

Dichiara il numero di colori che un determinato dispositivo può visualizzare.

griglia

La dimensione delle colonne e delle righe è specificata dalla funzionalità della griglia.

altezza

Questo definisce l'altezza del viewport.

molare

Per consentire agli utenti di passare il mouse su elementi HTML, viene utilizzata la funzione Hover.

colori invertiti

Ciò specifica se il dispositivo di output inverte o meno i colori.

Livello leggero

Come suggerisce il nome, definisce il livello di luce.

Ratio massimo-oypect

Il rapporto massimo di larghezza e altezza è specificato da questa funzione.

max-color

Il maggior numero di bit per unità a colori dei dispositivi di output è indicato da questa funzione.

indice massimo-color

Questa funzione indica i colori massimi che un dispositivo può visualizzare.

altezza massima

Questa funzione definisce l'altezza massima del browser.

max-monocromatico

Il maggior numero di bit per unità a colori di uno strumento monocromatico è indicato da questa funzione.

Min-risoluzione

La risoluzione minima del dispositivo di output è specificata dalla funzionalità di risoluzione minima.

larghezza min

Questa funzione definisce la larghezza minima del browser.

monocromo

Questa funzione afferma il numero massimo di bit per componente a colori di un dispositivo monocromatico.

orientamento

Definisce se l'orientamento del punto di vista è ritratto o paesaggio.

Overflow Block

Gestisce gli scenari in cui il contenuto della pagina Web trabocca il Viewport.

overflow in linea

Gestisce gli scenari in cui il contenuto della pagina Web trabocca la vista sull'asse in linea.

Pointer

Un meccanismo di input fondamentale per i dispositivi di puntamento.

risoluzione

Dichiara la risoluzione del dispositivo (in DPI o DPCM)

scansione

Scansiona i dispositivi di output.

scripting

Verifica se è disponibile o meno script come JavaScript.

aggiornamento

Aggiorna rapidamente i dispositivi di output.

larghezza

La larghezza della vista è definita da questa funzione.

Di seguito ti abbiamo presentato un esempio in modo da poter capire la regola @media in un modo migliore.

Esempio

L'esempio seguente dimostra la regola @media.

Html

Regola CSS @media

Allo scopo di alterare l'aspetto di una pagina Web in base al dispositivo o ai supporti che la visualizza, viene utilizzata la regola @media. Questa regola utilizza le query multimediali per eseguire l'attività di cui sopra. Questa regola si rivela di grande utilità quando si sviluppa un sito Web reattivo.

Qui abbiamo definito due elementi che lo sono

E

. Applicheremo alcune regole dei media su questi elementi.

CSS

H1, P
Font-Family: "Times New Roman", Times, Serif;
Font-size: 16px;
Font in stile: normale;

@media screen e (larghezza min: 720px)
P
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
Font-size: 25px;
Font in stile: corsivo;

Nel codice sopra, abbiamo specificato che sia l'intestazione che il paragrafo avranno la famiglia dei caratteri Verdana, una dimensione del carattere di 25px e uno stile di carattere in corsivo se la larghezza minima dello schermo del dispositivo è 720px o più ampia. Tuttavia, se la larghezza dello schermo è inferiore a 720px, la famiglia dei caratteri sarà Times New Roman, Font Size 16px e Font Style Normal.

Produzione

Quando la larghezza dello schermo è 720px o più ampia.

Quando la larghezza dello schermo è inferiore a 720px.

La regola @media è stata implementata con successo.

Conclusione

La regola @media viene utilizzata per modificare l'aspetto di una pagina Web in base al dispositivo o multimediale che la visualizza. La sintassi della regola afferma che il tipo di media dovrebbe essere definito insieme ad alcune funzionalità dei media e utilizzare alcuni operatori. Inoltre, ci sono quattro tipi che sono; tutto, schermo, stampa e discorso. Inoltre, ci sono molte caratteristiche dei media come larghezza, monocromatico, altezza, blocco di overflow, ecc. Questo post spiega profondamente la regola @media, insieme alla sua sintassi, tipi di media e funzionalità dei media.