HTML and CSS Reference
In-Depth Information
nota
Per un ulteriore approfondimento delle specifiche delle media query, potete con-
Per semplificarci ulteriormente la vita, vediamo ora brevemente quali sono le media query
più utilizzate per differenziare i vari tipi di device, dallo smartphone al monitor, passando
per i tablet.
Media query più utilizzate
Esistono framework CSS come Bootstrap (di cui parleremo nel
capitolo 11
)
che già offrono
media query per diverse dimensioni del browser e quindi, implicitamente, ottimizzano an-
che la visualizzazione per tipo di device (smartphone, tablet, monitor). Tuttavia, se dobbia-
mo anche noi scrivere CSS ottimizzati per le dimensioni del browser, dobbiamo essere a
conoscenza di questi formati
Esempio 5.18
<!--dimensioni del browser su smartphone-->
@import url(stylesheetsmartphones.css)
(min-width: 768px)
<!--dimensioni del browser su tablet-->
@import url(stylesheettablet.css)
(min-width: 992px)
<!--dimensioni browser su monitor a full screen-->
@import url(stylesheetmonitor.css)
(min-width: 1200px)
<!--retina display-->
@import url(stylesheetretina.css)
(-webkit-min-device-pixel-ratio: 2)
Ora possiamo passare al prossimo argomento del capitolo che sono le trasformazioni 2D
degli elementi.
