para - responsive css @media

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

Question

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

Quiero ser capaz de apuntar escritorio, tableta y móvil. 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 crees que deberían ser estos ''puntos de interrupción'' para cada dispositivo?

Answer 1

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

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

• Desarrolle el sitio para dispositivos móviles primero utilizando porcentajes o ems, no píxeles,
• luego inténtalo en una vista más grande y observa dónde comienza a fallar,
• rediseñe el diseño y agregue una consulta de medios CSS solo para manejar las partes rotas,
• repite el proceso hasta llegar al siguiente punto de interrupción.

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

Utilizar puntos de ruptura naturales.

Los "puntos de interrupción" se convierten en el punto real en el que el diseño de su dispositivo móvil comienza a "romperse", es decir, deja de ser utilizable o agradable a la vista. Una vez que tenga un buen sitio móvil en funcionamiento, sin consultas de medios, puede dejar de preocuparse por los 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 a un tamaño de pantalla exacto, 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 garantiza que se mantendrá en cualquier tamaño. En otras palabras, si un menú / sección de contenido / lo que sea deje de ser utilizable en un tamaño determinado, 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 ruptura de comportamiento , y también la publicación de Zeldman sobre Ethan Marcotte y cómo el diseño web sensible evolucionó desde la idea inicial.

Answer 2

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

Answer 3

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

Answer 4

1. He usado este site 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 my css en realidad alcanza los dispositivos deseados.

2. Además, tenga esta pieza de 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) { /* 10 inch tablet enter here */
     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;
     }
   } 

   Consiguió esto en la web, no recuerdo exactamente el sitio. Agregue este elemento de depuración en cada consulta de medios única y verá qué consulta se ha aplicado.

Answer 5

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

La forma más fácil de hacer esto es agarrar el diseño de escritorio completado y abrirlo en su navegador web. Reduce la pantalla lentamente para hacerla más estrecha. Observe para ver cuando el diseño comienza a "romperse", o se ve horrible y estrecho. En este punto, se requeriría un punto de ruptura 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 en la complejidad de agregar tres consultas de medios diferentes que no son necesarias? Hazlo según sea necesario.

Answer 6

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

Edit : Refinado para trabajar mejor con 960 grids:

@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 en ems, en gran medida b / c ems mejor que el zoom. En el zoom estándar 1em === 16px . Multiplique los píxeles por 1em/16px para obtener ems. Por ejemplo, 320px === 20em .

En respuesta al comentario, min-width es estándar en el diseño "mobile-first", en el que comienza diseñando para sus pantallas más pequeñas, y luego agrega consultas de medios cada vez más grandes, trabajando en pantallas más grandes y más grandes. Independientemente de si prefiere min- , max- o combinaciones de los mismos, tenga en cuenta el orden de sus reglas, teniendo en cuenta que si varias reglas coinciden con el mismo elemento, las reglas posteriores anularán las reglas anteriores.

Answer 7

Hoy en día, lo más común es ver dispositivos con pantalla 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 mostrar consultas de medios 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: CSS-Tricks Website

Answer 8

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

    }

Answer 9

No es una cuestión de conteo de píxeles, es una cuestión de tamaño real (en mm o pulgadas) de caracteres en la pantalla, que depende de la densidad de píxeles. Por lo tanto, "min-width:" y "max-width:" son inútiles. Aquí encontrará una explicación completa de este problema: ¿qué es exactamente la proporción de píxeles del dispositivo?

Las consultas "@media" tienen en cuenta el recuento de píxeles y la proporción de píxeles del dispositivo, lo que da como resultado 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 " La resolución horizontal virtual "es de 300 px, se necesitarán 30 caracteres para completar una línea.

Answer 10

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 encajar su sitio web para el iPad de Apple
• Consultas de medios CSS3

Answer 11

Siguiendo trabajó para mí. El comportamiento no cambia en el escritorio. Pero en tabletas y dispositivos móviles, amplío la barra de navegación para cubrir la gran imagen del logotipo. Tenga en cuenta que use el margen (superior e inferior) tanto como necesite para la altura de su logotipo. Para mi caso, 60px superior e inferior funcionaron perfectamente. Compruebe la barra de navegación aquí .

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

Answer 12

@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

    }

Answer 13

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)