Creativa.dev

Media Queries para dispositivos estándares

Media Queries para dispositivos estándares, esta página es visitada por una tonelada de diferentes dispositivos y media queries que se dirigen específicamente a esos dispositivos. Eso probablemente no es generalmente una gran práctica, pero es útil saber cuáles son las dimensiones para todos estos dispositivos en un contexto de CSS.
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Media Queries para dispositivos estándares

Si crees que la respuesta es simple, me siento mal por ti hijo. Tenemos 99 ventanas, pero el iPhone es solo tiene una.

Un componente importante del diseño responsivo es crear la experiencia adecuada para el dispositivo adecuado. Con un millón de dispositivos diferentes en el mercado, esto puede ser una tarea difícil. Hemos redondeado media queries que se pueden utilizar para orientar el diseño para muchos dispositivos estándares y populares que sin duda vale la pena leer.

Si está buscando una lista completa de media querieseste repositorio es un buen recurso a consultar.

¡Si tu reacción a esto es: nunca debes basar tus puntos de quiebre en los dispositivos! Tienes toda la razón. Justin Avery tiene un buen post sobre los posibles escollos de usar puntos de quiebre específicos por dispositivo. Elegir puntos de quiebre basados en su diseño y no en dispositivos específicos es una manera inteligente de desarrollar. Pero a veces solo necesitas un poco de ayuda para controlar una situación en particular.

Media Queries para dispositivos estándares

Teléfonos y dispositivos portátiles

iPhones

/* ----------- 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, 5S, 5C and 5SE ----------- */
 
/* 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, 6S, 7 and 8 ----------- */
 
/* 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+, 7+ and 8+ ----------- */
 
/* 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) { 
 
}
 
/* ----------- iPhone X ----------- */
 
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
 
}
 
/* Portrait */
@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
 
}
 
/* Landscape */
@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
 
}

Teléfonos Galaxy

/* ----------- Galaxy S3 ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 360px) 
  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, S5 and Note 3 ----------- */
 
/* 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 S6 ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
 
}
 
/* Portrait */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
 
}
 
/* Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
 
}

Google Pixel

/* ----------- Google Pixel ----------- */
 
/* 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) {
 
}
 
/* ----------- Google Pixel XL ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
 
}
 
/* Portrait */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
 
}
 
/* Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
 
}

Teléfonos HTC

/* ----------- 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) {
 
}

Windows Phone

/* ----------- Windows Phone ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 480px) 
  and (device-height: 800px) {
 
}
 
/* Portrait */
@media screen
  and (device-width: 480px) 
  and (device-height: 800px)  
  and (orientation: portrait) {
 
}
 
/* Landscape */
@media screen
  and (device-width: 480px) 
  and (device-height: 800px) 
  and (orientation: landscape) {
 
}

Tabletas

iPads

/* ----------- iPad 1, 2, Mini and Air ----------- */
 
/* 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, 4 and Pro 9.7" ----------- */
 
/* 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 Pro 10.5" ----------- */
 
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* ----------- iPad Pro 12.9" ----------- */
 
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
 
}

Tabletas Galaxy

/* ----------- Galaxy Tab 2 ----------- */
 
/* 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 S ----------- */
 
/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 
 
}
 
/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 
 
}

Tabletas Nexus

/* ----------- 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) {
 
}
 
/* ----------- Nexus 9 ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {
 
}
 
/* Portrait */
@media screen
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  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: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {
 
}

Kindle Fire

/* ----------- Kindle Fire HD 7" ----------- */
 
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
 
}
 
/* Portrait */
@media only screen
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}
 
/* Landscape */
@media only screen
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {
 
}
 
/* ----------- Kindle Fire HD 8.9" ----------- */
 
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
 
}
 
/* Portrait */
@media only screen
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}
 
/* Landscape */
@media only screen
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {
 
}

Ordenadores portátiles

Los media queries para computadoras portátiles son un poco gigantescos. En lugar de dirigirte a dispositivos específicos, intenta especificar un rango de tamaño de pantalla general y, a continuación, distinguir entre las pantallas retina y las que no son retina.

/* ----------- 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) { 
}

Wearables

Sí, vamos para allá. Por supuesto, estos podrían no calificar exactamente como dispositivos «estándares» todavía, pero son divertidos de ver.

Apple Watch

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

Reloj Moto 360

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 
 
}
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

FAQ's

Si aún tiene dudas, lo invitamos a revisar nuestras preguntas frecuentes sobre nuestros servicios.

Diseño Web & Desarrollo

¿No encuentra la respuesta que busca para su sitio web? ¡Compartimos algunas de nuestras preguntas más frecuentes para ayudarlo!

Branding & Diseño Gráfico

¿Quiere un logotipo, una ilustración o un diseño pero no puede encontrar la respuesta que está buscando? Eche un vistazo a nuestras preguntas frecuentes.

Marketing Digital

¿Estás listo para impulsar tu negocio pero no encuentras la respuesta que estás buscando? Echa un comentario a nuestras preguntas frecuentes.