Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

CSS Media queries: caratteristiche dei media

Su quali caratteristiche di un dispositivo possiamo intervenire con le media queries
Su quali caratteristiche di un dispositivo possiamo intervenire con le media queries
Link copiato negli appunti

Nella lezione precedente ci siamo soffermati sulle regole di base delle media queries. Per sfruttarne al meglio tutto il potenziale, però, è fondamentale conoscere le caratteristiche dei media su cui si può intervenire per indirizzare un foglio di stile.

Width

width designa la larghezza dell'area di visualizzazione del documento. Su un normale browser web essa è rappresentata dal viewport e non ha nulla a che vedere con le dimensioni dello schermo del dispositivo.

I valori di width possono essere espressi con qualunque unità di misura.

@media screen and (width: 400px) {
/* regole CSS */
}

width può essere preceduta dai prefissi min- e max-, ottenendo così min-width e max-width. È proprio così che esplica tutta la sua utilità, specie nella realizzazione di layout. La seguente espressione, per esempio, applica un certo stile quando le dimensioni sono comprese tra 400px e 1024px:

@media screen and (min-width: 400px) and (max-width: 1024px) {
/* regole CSS */
}

A puro titolo esemplificativo abbiamo creato questa demo:

#box1 {
background: #4c74be;
width: 300px;
padding: 30px;
border-top-left-radius: 20px;
margin-bottom: 40px;
color: black;
}
@media screen and (min-width: 400px) and (max-width: 1024px) {
#box1 {
color: red;
}
}

Il div #box1 ha il testo nero, ma nella media query abbiamo scritto: quando la larghezza della finestra è compresa tra 400px e 1024px il testo diventa rosso. Provate a ridimensionare la finestra per verificare.

Height

height designa l'altezza dell'area di visualizzazione del documento. Come nel caso di width può essere definita con i prefissi min- (min-height) e max- (max-height).

Device-width

Con device-width si descrive la larghezza dell'intera area di rendering di un dispositivo. Su un computer o su un dispositivo mobile si intende la larghezza dell'intero schermo del dispositivo, non semplicemente quindi dell'area di visualizzazione del documento!

Accetta i prefissi min- (min-device-width) e max- (max-device-width).

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" type="text/css" />

Device-height

Descrive l'altezza dell'intera area di rendering di un dispositivo. Accetta i prefissi min- e max-.

Orientation

La caratteristica orientation indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell'altezza) oppure portrait (l'altezza è maggiore della larghezza). I valori che può assumere sono appunto landscape o portrait.

Nell'esempio la definizione di media queries con cui si servono CSS ad hoc ad un iPad a seconda se si trovi in modalità landscape o portrait:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css" type="text/css" />

Aspect-ratio

Definisce il rapporto tra la larghezza (width) e l'altezza (height) dell'area di visualizzazione di un documento. Può assumere i prefissi min- e max-.

I valori si esprimono attraverso due numeri interi separati dal simbolo /: 3/4, 16/9, etc.

Device-spect-ratio

Descrive il rapporto tra la larghezza (device-width) e l'altezza (device-height) dell'area di rendering di un dispositivo. Può assumere i prefissi min- e max-.

@media screen and (device-aspect-ratio: 16/9) {
/* regole CSS */
}

Con questa media query creiamo una regola CSS che si applica solo a schermi con un rapporto di 16/9.

Color

Tecnicamente questa caratteristica indica il numero di bit per ciascuna componente colore sul dispositivo di output. color infatti può assumere come valori dei numeri interi, assumendo che 0 designa un dispositivo che non supporta il colore.

Nella pratica, comunque, salvo che non si abbiano esigenze molto specifiche, si può usare nella sua forma più semplice, andando così a indirizzare i CSS ai dispositivi che supportano il colore:

@media all and (color) {
/* regole CSS */
}

Color-index

Descrive il numero di colori presenti nella tavolozza supportata da un certo dispositivo. Può assumere i prefissi min- e max-.

<link rel="stylesheet" media="all and (min-color-index: 256)" href="colore.css" />

Secondo questa media query, il foglio di stile colore.css sarà applicato su dispositivi che supportano come minimo una tavolozza di 256 colori.

Monochrome

Indica il numero di bit per pixel su un dispositivo monocromatico (a scala di grigi).

Resolution

Descrive la risoluzione (ovvero la densità di pixel) del dispositivo di output. I valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro). Può assumere i prefissi min- e max-.

@media print and (min-resolution: 300dpi) {
/* regole CSS */
}

Scan

Si tratta di una caratteristica valida per gli schermi televisivi, quindi per il tipo di media tv. Indica il tipo di scansione, interlacciata o progressiva. I valori possono essere progressive oppure interlace.

Grid

Indica se il dispositivo è di tipo bitmap oppure 'a griglia', come certi terminali monocromatici e gli schermi per cellulari con un solo font.

Tabella del supporto sui browser

Media queries Internet Explorer Firefox Safari Google Chrome Opera
width 9.0+ 3.5+ 4.0+ 2.0+ 9.0+
height 9.0+ 3.5+ 4.0+ 2.0+ 9.0+
device-width 9.0+ 3.5+ 4.0+ 2.0+ 9.0+
device-height 9.0+ 3.5+ 4.0+ 2.0+ 9.0+
device-aspect-ratio 9.0+ 3.5+ 4.0+ 2.0+ 9.0+
color 9.0+ 3.5+ 4.0+ 2.0+ 10.5+
color-index 9.0+ 3.5+ 4.0+ 2.0+ 10.5+
monochrome 9.0+ 3.5+ 4.0+ 2.0+ 10.5+
resolution 9.0+ 3.5+ 4.0+ 2.0+ 10.5+
orientation 9.0+ 3.5+ 4.0+ 2.0+ No
aspect-ratio 9.0+ 3.5+ 4.0+ 2.0+ 9.5
scan 9.0+ No No No 10.5
grid 9.0+ No No No 10.5

Ti consigliamo anche