Consultas de medios: ¿Cómo apuntar a computadoras de escritorio, tabletas y dispositivos móviles?


472

He estado investigando sobre consultas de medios y todavía no entiendo cómo apuntar a dispositivos de ciertos tamaños.

Quiero poder apuntar a computadoras de escritorio, tabletas y dispositivos móviles. Sé que habrá algunas discrepancias, pero sería bueno tener un sistema genérico que pueda usarse para apuntar a estos dispositivos.

Algunos ejemplos que he encontrado:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

O:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

¿Cuáles deberían ser los puntos de interrupción para cada dispositivo?



Consultas de medios para dispositivos estándar css-tricks.com/snippets/css/media-queries-for-standard-devices
Dmytro Dzyubak

Respuestas:


644

En mi opinión, estos son los mejores puntos de interrupción:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Editar : refinado para funcionar mejor con 960 cuadrículas:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

En la práctica, muchos diseñadores convierten píxeles a ems, en gran medida b / c ems pueden permitirse el zoom. Con zoom estándar 1em === 16px. Multiplica píxeles por 1em/16pxpara obtener ems. Por ejemplo, 320px === 20em.

En respuesta al comentario, min-widthes estándar en el diseño "móvil primero", en el que comienza diseñando para sus pantallas más pequeñas, y luego agrega consultas de medios cada vez mayores, trabajando en pantallas cada vez más grandes. Independientemente de si usted prefiere min-, max-o combinaciones de los mismos, ser conscientes del orden de las reglas, teniendo en cuenta que si hay varias reglas coinciden con el mismo elemento, las reglas posteriores anularán las reglas anteriores.


1
Me he estado preguntando acerca de incrementar el límite inferior de consultas de medios. Parece lógico, pero no lo he visto mencionado con demasiada frecuencia. Incluso lo llevaría un paso más allá y lo convertiría a ems. Mire las capturas de pantalla de @jonikorpi del comportamiento del sitio de Ethan Marcotte con zoom y consultas de medios px. github.com/scottjehl/Respond/issues/18
Larry

21
¿Por qué usaría min-width en lugar de max-width? ¿Cómo evitarías que el min-width: 320pxcss anule el min-width: 801px?
user2019515

2
¡Este código no funciona en mis dispositivos móviles! ¿Alguien puede dar un ejemplo de trabajo!
Jacob

3
¿Alguien tiene el equivalente de "ancho máximo" de esto?
Pylinux

66
2018 - 2k y 4k están en aumento
Alexander

160

¡No apunte a dispositivos o tamaños específicos!

La sabiduría general no es apuntar a dispositivos o tamaños específicos , sino replantear el término 'punto de interrupción':

  • desarrolle el sitio para dispositivos móviles primero usando porcentajes o ems, no píxeles,
  • luego pruébelo en una ventana gráfica más grande y observe dónde comienza a fallar,
  • rediseñar el diseño y agregar una consulta de medios CSS solo para manejar las partes rotas,
  • repita el proceso hasta llegar al siguiente punto de interrupción.

Puede usar responsivepx.com para encontrar los puntos de interrupción 'naturales', como en 'Los puntos de interrupción están muertos' por Marc Drummond .

Use puntos de interrupción naturales

Los 'puntos de interrupción' se convierten en el punto real en el que su diseño móvil comienza a 'romperse', es decir, dejan de ser utilizables o visualmente agradables. Una vez que tenga un buen sitio móvil que funcione, sin consultas de medios, puede dejar de preocuparse por tamaños específicos y simplemente agregar consultas de medios que manejen ventanas gráficas sucesivamente más grandes.

Si no está intentando fijar un diseño al tamaño exacto de la pantalla, este enfoque funciona eliminando la necesidad de apuntar a dispositivos específicos . La integridad del diseño en sí mismo en cada punto de interrupción asegura que se mantendrá en cualquier tamaño. En otras palabras, si un menú / sección de contenido / lo que sea deja de ser utilizable en un cierto tamaño, diseñe un punto de interrupción para ese tamaño , no para un tamaño de dispositivo específico.

Vea la publicación de Lyza Gardner sobre puntos de interrupción del comportamiento , y también la publicación de Zeldman sobre Ethan Marcotte y cómo el diseño web receptivo evolucionó a partir de la idea inicial.

Usar marcado semántico

Además, el más simple y semántica de la estructura del DOM con nav, header, main, section, footeretc (evitando abominaciones como div class="header"con internos anidados divetiquetas), más fácil será para la capacidad de respuesta ingeniero, especialmente evitando los flotadores mediante el uso de CSS Diseño de cuadrícula (de Sarah Drasner generador de rejilla es una gran herramienta para esto) y flexbox para organizar y reordenar de acuerdo con su plan de diseño RWD.


10
El cliente querrá que su sitio se vea así en su iPad. Mi mejor punto de quiebre haría que el sitio cambiara al diseño móvil en el iPad. El cliente no acepta eso, quiere que aparezca una versión elegante en el iPad y otras tabletas. La sabiduría general no está pagando mi salario :) Necesitaba hacer trucos con la metaetiqueta viewport. Fue muy doloroso pero lo logré con un poco de ayuda de JavaScript (como siempre). PD: utilicé unidades de cm, no píxeles.
Rolf

Con los puntos de interrupción naturales puede tener un punto de interrupción de tamaño medio que incluye el iPad (y otras tabletas) en modo horizontal, o agregar otro punto de interrupción para el modo vertical. A veces he usado cuatro puntos de interrupción, siempre comenzando CSS y todo el marcado con mobile-first (es más difícil de reducir y centrarse en el dispositivo móvil significa que su diseño y contenido se reducen a lo esencial, que puede ampliar a medida que aumentan los tamaños) , uno justo por encima de 400px de ancho (o 'por encima del tamaño móvil'), luego dos tamaños de escritorio, uno extra ancho. A continuación, puede diseñar el punto de interrupción "anterior móvil" para que funcione bien en el iPad.
Dave Everitt

2
Esto no es suficiente para todos los casos. Tomemos, por ejemplo, casillas de verificación. Pueden estar bien para todos los navegadores web en una PC, pero en una tableta puede ser demasiado pequeña para que el usuario la toque. A veces es necesario apuntar a dispositivos, ya sea sabiduría general o no. Este es un buen artículo: html5rocks.com/en/mobile/cross-device
monalisa717

2
Estoy con Dave en este caso: hay tantos dispositivos que no puedes diseñar para todos ellos. El uso de puntos de interrupción naturales garantiza que su sitio funcione independientemente del tamaño de pantalla disponible. En cuanto a los clientes que desean que su sitio se vea de cierta manera, debe educarlos. En cuanto a que las casillas de verificación son demasiado pequeñas, ¿dónde están sus etiquetas?
diggersworld

@ user1411056 - buen artículo. Supongo que depende de a qué apunta y cómo funciona su sitio / aplicación web. Yo diría que el diseño receptivo básico debería apuntalar todo antes de que se realicen mejoras. diggersworld Estoy a favor de educar a los clientes, ¿por qué más te están pagando? Y sí, las casillas de verificación pueden responder; tocar una etiqueta es equivalente, y las etiquetas se pueden diseñar. Luego está la inutilidad de pasar el mouse sobre dispositivos táctiles; que puede tener pantallas grandes y el retraso de toque de 300 ms . Una base RD básica, mejorada por JS.
Dave Everitt

154

Si desea apuntar a un dispositivo, simplemente escriba min-device-width. Por ejemplo:

Para Iphone

@media only screen and (min-device-width: 480px){}

Para tabletas

@media only screen and (min-device-width: 768px){}

Aquí hay algunos buenos artículos:


32
Mi tableta tiene un ancho de 2560x1600
LeeGee

36
Puede ser así, pero los navegadores en dispositivos móviles tienen una "relación de píxeles del dispositivo". Aquí es donde trata cada "píxel" lógico como 2, 3 o incluso más píxeles reales en su dispositivo. De lo contrario, una altura de 20 píxeles sería muy pequeña e imposible de presionar, ¡especialmente en su pantalla!
greg84

66
@media solo pantalla y (min-device-width: 480px) {} Lo probé - coincide también para computadoras de escritorio. Pero, ¿y si solo queremos un dispositivo móvil?
Darius.V

@ Darius.V, esto sigue la mentalidad de "Primero móvil", lo que significa que inicia el móvil y luego realiza cambios a medida que la pantalla se hace más grande, por lo que también deberá incluir: @media only screen and (min-device-width: 1024){}o algo así para anular estos cambios. Alternativamente, podría hacerlo @media only screen and (MAX-device-width: 1024){}si comenzó con un diseño de escritorio y desea hacer cambios solo a cosas más pequeñas que 1024.
Steely

Esto significa que el escritorio no funcionará con RWD debido al ancho mínimo del dispositivo. Se recomienda hacer min-width y nada basado en dispositivos. La verdadera respuesta no debería requerir una actualización o un dispositivo limitado
TheBlackBenzKid

50
  1. He usado este sitio para encontrar la resolución y he desarrollado CSS por números reales. Mis números varían bastante de las respuestas anteriores, excepto que mi CSS realmente alcanza los dispositivos deseados.

  2. Además, tenga este código de depuración justo después de su consulta de medios, por ejemplo:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 

    Agregue este elemento de depuración en cada consulta de medios y verá qué consulta se ha aplicado.


27

Los mejores puntos de interrupción recomendados por Twitter Bootstrap

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

25

Consultas de medios para puntos de interrupción de dispositivos comunes

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

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

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

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

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

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

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

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

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

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

19
  1. Dispositivos extra pequeños (teléfonos, hasta 480 px)
  2. Pequeños dispositivos (tabletas, 768 px y más)
  3. Dispositivos medianos (tabletas horizontales grandes, computadoras portátiles y de escritorio, 992 px y más)
  4. Dispositivos grandes (escritorios grandes, 1200 px y más)
  5. lectores electrónicos de retrato (Nook / Kindle), tabletas más pequeñas - ancho mínimo: 481px
  6. tabletas verticales, iPad vertical, lectores electrónicos horizontales - ancho mínimo: 641 px
  7. tableta, iPad horizontal, portátiles de baja resolución: ancho mínimo: 961 px
  8. HTC One-ancho del dispositivo: 360px altura del dispositivo: 640px -webkit-device-pixel-ratio: 3
  9. Ancho del dispositivo Samsung Galaxy S2: 320px altura del dispositivo: 534px -webkit-device-pixel-ratio: 1.5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
  10. Ancho del dispositivo Samsung Galaxy S3: 320px altura del dispositivo: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Navegadores de Firefox más antiguos (anteriores a Firefox 16) -
  11. Ancho del dispositivo Samsung Galaxy S4: 320px altura del dispositivo: 640px -webkit-device-pixel-ratio: 3
  12. Ancho del dispositivo LG Nexus 4: 384 px de altura del dispositivo: 592 px -webkit-device-pixel-ratio: 2
  13. Ancho del dispositivo Asus Nexus 7: 601px altura del dispositivo: 906px -webkit-min-device-pixel-ratio: 1.331) y (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 y 2, ancho del dispositivo iPad Mini: 768 px de altura del dispositivo: 1024 px -webkit-device-pixel-ratio: 1
  15. Ancho del dispositivo iPad 3 y 4: 768 px de altura del dispositivo: 1024 px -webkit-device-pixel-ratio: 2)
  16. Ancho del dispositivo iPhone 3G: 320px altura del dispositivo: 480px -webkit-device-pixel-ratio: 1)
  17. Ancho del dispositivo iPhone 4: 320px altura del dispositivo: 480px -webkit-device-pixel-ratio: 2)
  18. Ancho del dispositivo iPhone 5: 320px altura del dispositivo: 568px -webkit-device-pixel-ratio: 2)

1
Sansung Galaxy S3 @media solo pantalla y (ancho del dispositivo: 720px) y (altura del dispositivo: 1280px) y (-webkit-min-device-pixel-ratio: 2) PROBADO y trabajado.
user2060451

5

No se trata del recuento de píxeles, se trata del tamaño real (en mm o pulgadas) de los caracteres en la pantalla, que depende de la densidad de píxeles. Por lo tanto, "min-width:" y "max-width:" son inútiles. Una explicación completa de este problema está aquí: ¿qué es exactamente la relación de píxeles del dispositivo?

Las consultas "@media" tienen en cuenta el recuento de píxeles y la relación de píxeles del dispositivo, lo que resulta en una "resolución virtual" que es lo que debe tener en cuenta al diseñar su página: si su fuente es de 10px de ancho fijo y el " resolución horizontal virtual "es de 300 px, se necesitarán 30 caracteres para llenar una línea.


77
Excelente. Entonces, ¿cuáles deberían ser las consultas de los medios?
PKHunter

4

Hoy en día, lo más común es ver dispositivos con pantalla de retina, en otras palabras: dispositivos con altas resoluciones y una densidad de píxeles muy alta (pero generalmente de un tamaño físico menor a 6 pulgadas). Es por eso que necesitará retina para mostrar consultas multimedia especializadas en su CSS. Este es el ejemplo más completo que pude encontrar:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Fuente: sitio web de CSS-Tricks


4

Dado que hay muchos tamaños de pantalla variables que siempre cambian y lo más probable es que siempre cambie, la mejor manera de hacerlo es basar sus puntos de interrupción y consultas de medios en su diseño.

La forma más fácil de hacerlo es tomar su diseño de escritorio completo y abrirlo en su navegador web. Reduce la pantalla lentamente para hacerla más estrecha. Observe para ver cuándo el diseño comienza a "romperse" , o se ve horrible y estrecho. En este punto, se requeriría un punto de interrupción con una consulta de medios.

Es común crear tres conjuntos de consultas de medios para computadoras de escritorio, tabletas y teléfonos. Pero si su diseño se ve bien en los tres, ¿por qué molestarse con la complejidad de agregar tres consultas de medios diferentes que no son necesarias? ¡Hágalo según sea necesario!


3

Una característica adicional es que también puede usar consultas de medios en el atributo de medios de la <link>etiqueta.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Con esto, el navegador descargará todos los recursos CSS, independientemente del atributo multimedia . La diferencia es que si la consulta de medios del atributo de medios se evalúa como falsa , ese archivo .css y su contenido no se bloquearán.

Por lo tanto, se recomienda utilizar el atributo de medios en la <link>etiqueta, ya que garantiza una mejor experiencia de usuario.

Aquí puede leer un artículo de Google sobre este problema https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Algunas herramientas que lo ayudarán a automatizar la separación de su código CSS en diferentes archivos de acuerdo con sus consultas de medios

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query


2

El comportamiento no cambia en el escritorio. Pero en tabletas y móviles, amplío la barra de navegación para cubrir la imagen del logotipo grande. Nota: Use el margen (superior e inferior) tanto como lo necesite para la altura de su logotipo.

Para mi caso, 60px superior e inferior funcionó perfectamente!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Mira la barra de navegación aquí .


2
  • Dispositivos extra pequeños ~ Teléfonos (<768px)
  • Pequeños dispositivos ~ Tabletas (> = 768px)
  • Dispositivos medianos ~ Escritorios (> = 992px)
  • Dispositivos grandes ~ Equipos de escritorio (> = 1200px)

2

Estoy usando el siguiente para hacer mi trabajo.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

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

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

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

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

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

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

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

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

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

-1
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.