Consultas de mídia CSS para dispositivos diferentes

/ * Smartphones (retrato e paisagem) ———– /
@media only screen
e (min-device-width: 320px)
e (max-device-width: 480px) {
/
Styles * /
}

/ * Smartphones (paisagem) ———– /
tela somente
@ mídia e (largura mínima: 321px) {
/
Estilos * /
}

/ * Smartphones (retrato) ———– /
tela somente
@ mídia e (largura máxima: 320px) {
/
Estilos * /
}

/ * iPads (retrato e paisagem) ———– /
@media only screen
e (min-device-width: 768px)
e (max-device-width: 1024px) {
/
Styles * /
}

/ * iPads (paisagem) ———– /
@media only screen
e (min-device-width: 768px)
e (max-device-width: 1024px)
e (orientação: paisagem) {
/
Estilos * /
}

/ * iPads (retrato) ———– /
@media only screen
e (min-device-width: 768px)
e (max-device-width: 1024px)
e (orientação: retrato) {
/
Estilos * /
}

/ * Desktops and laptops ———– /
@media only screen
e (min-width: 1224px) {
/
Styles * /
}

/ * Telas grandes ———– /
tela somente
@ mídia e (largura mínima: 1824px) {
/
Estilos * /
}

/ * iPhone 4 ———– /
@media
only screen e (-webkit-min-device-pixel-ratio: 1,5),
apenas tela e (min-device-pixel-ratio: 1,5) {
/
Estilos * /
}