Tutte le Media Query per gli standard più comuni

In questo post voglio condividere il modo migliore per impostare le media query nel vostro CSS.

La maggior componente di un design responsive è creare la giusta esperienza per il giusto device. Ci sono ormai centinaia di differenti device nel marcato, con differenti risoluzioni, il chè non rende la vita facile. L’opzione migliore è trovare le media queries che possono essere usate per la maggior parte degli standard e per gli apparati più popolari.

Per definizione un breakpoint è un punto, su una linea ideale che parte da 0, in cui si verifica una qualche modifica (tramite i CSS) al layout della pagina. I breakpoint si definiscono con valori numerici e unità di misura nel contesto delle media queries inserite nei nostri fogli di stili CSS.

La scelta dei breakpoint non è la migliore per implementare un buon responsive design, le media queries dovrebbero invice abbracciare un rage di risoluzioni, in altreparole da valore1 px a valore2 px.

Ecco di seguito tutte le media query che dovresti conoscere:

Phones and Handhelds

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

100

101

102

103

104

105

106

107

108

109

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3) {

}

/* Portrait */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- HTC One ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

Tablets

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */

@media

(min-device-width: 800px)

and (max-device-width: 1280px) {

}

/* Portrait */

@media

(max-device-width: 800px)

and (orientation: portrait) {

}

/* Landscape */

@media

(max-device-width: 1280px)

and (orientation: landscape) {

}

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: landscape) {

}

Portatili

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

/* ----------- Non-Retina Screens ----------- */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- Retina Screens ----------- */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 2)

and (min-resolution: 192dpi) {

}

Orologi

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

/* ----------- Apple Watch ----------- */

@media

(max-device-width: 42mm)

and (min-device-width: 38mm) {

}

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

/* ----------- Moto 360 Watch ----------- */

@media

(max-device-width: 218px)

and (max-device-height: 281px) {

}

Tutte le Media Query per gli standard più comuni

Qua potete trovare l'elenco di tutte le CSS media query per i dispositivi piu' comuni per rendere il tuo sito responsive

Phones and Handhelds

Tablets

Portatili

Orologi

Submit a Comment Cancel reply

Last Articles

Find Out More

Whatsapp Me

A Random Project