HTML and CSS Reference
In-Depth Information
(min-width: 1024px) and (min-height: 768px);
Selezionare il CSS in base alle dimensioni del device o del browser è molto comodo, ma
spesso abbiamo bisogno di una tipologia di selezione più semplice, come l'orientamento.
Orientamento
L'orientamento di un device può essere una buona discriminante per scegliere il file CSS
da utilizzare. Come detto in precedenza, se il device è in
landscape
(orientamento oriz-
zontale), possiamo ottimizzare la visualizzazione del sito occupando la totale larghezza del
device, mentre se il device è in
portrait
(orientamento verticale), abbiamo a disposizio-
ne meno pixel in larghezza, ma una maggiore altezza.
Nell'esempio 5.15
vediamo come
utilizzare la clausola
orientation
per selezionare il CSS in base all'orientamento del
device.
Esempio 5.15
@import url(stylesheetPortrait.css)
(orientation: portrait);
Oltre all'orientamento, anche il rapporto tra la larghezza e l'altezza del device può essere
una discriminante.
Rapporto tra larghezza e altezza
I monitor attualmente in commercio hanno il formato 16:9 o 16:10. Tuttavia esistono an-
cora molti monitor datati che hanno il formato 4:3. Con le media query possiamo sceglie-
re il CSS da utilizzare anche in base a questo formato, sfruttando le clausole
device-
aspect-ratio
e
aspect-ratio
. La prima stabilisce il rapporto tra larghezza e altez-
za del device, mentre la seconda stabilisce il rapporto tra larghezza e altezza del browser.
Così come avviene per le clausole che specificano la dimensione, possiamo sfruttare
un range di valori anteponendo i prefissi
min-
e
max-
alle clausole appena viste.
Nell'esempio 5.16
possiamo vedere delle dimostrazioni che mostrano come selezionare un
CSS in base a queste clausole.
Esempio 5.16
@import url(stylesheet16_9.css)
(device-aspect-ratio: 16/9)
