# Media Queries para dispositivos estándares

- Link: https://creativa.dev/desarrollo-web/media-queries-para-dispositivos-estandares/
- Published: 2020-07-19T22:22:20-04:00
- Author: Juanito Ortega

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

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 queries**, [este repositorio](http://cssmediaqueries.com/)
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](http://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints)
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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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

    ```notranslate
    /* ----------- 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.

    ```notranslate
    /* ----------- 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

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

    }
    ```

### Reloj Moto 360

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

    }
    ```