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

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?

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.

¡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.

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:

• Cómo ajustar su sitio web para el iPad de Apple
• Consultas de medios CSS3

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.

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) {

    }

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

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)

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.

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

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!

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

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í .

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

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

@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

    }