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

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

Para iPhone

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

Para comprimidos

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

Aquí están algunos buenos artículos:

• Cómo ajustar su sitio web para el iPad de Apple
• CSS3 Media Queries

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

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

• desarrollar el sitio para mobile first utilizando porcentajes o ems, no píxeles,
• luego inténtelo en una ventana más grande y observe dónde comienza a fallar,
• rediseñe el diseño y agregue una consulta de medios CSS solo para manejar las partes rotas,
• repita el proceso hasta que alcance el siguiente punto de interrupción.

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

Utilice puntos de interrupción naturales

Los 'puntos de interrupción' entonces se convierten en el punto real en el que su diseño móvil comienza a 'romper' es decir, dejar de ser utilizable o visualmente agradable. 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 manejan vistas sucesivamente más grandes.

Si no está tratando de fijar un diseño a un tamaño de pantalla exacto, este enfoque funciona mediante eliminando la necesidad de apuntar a dispositivos específicos. La integridad del diseño en sí 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 dispositivo específico Tamaño.

Ver el post de Lyza Gardner en puntos de corte conductuales, y también el post de Zeldman sobre Ethan Marcotte y cómo el diseño web responsivo evolucionó a partir de la idea inicial.

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

2. También, tenga este fragmento 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;
     }
   } 
   

   Tengo esto en la web, no recuerdo exactamente el sitio. Agregue este elemento de depuración en cada consulta de medios y verá qué consulta se está aplicando.

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 480px)
2. Dispositivos pequeños (tabletas, 768px y más)
3. Dispositivos medianos (tabletas grandes del paisaje, ordenadores portátiles, y de escritorio, 992px y arriba)
4. Dispositivos grandes (escritorios grandes, 1200px y arriba)
5. lectores electrónicos de retrato (Nook/Kindle), tabletas más pequeñas - min-ancho:481px
6. tabletas retrato, retrato iPad, paisaje e-readers-min-ancho: 641px
7. tableta, iPad horizontal, laptops con resolución baja-ancho mínimo: 961px
8. HTC One device-width: 360px device-height: 640px-webkit-device-pixel-ratio: 3
9. Samsung Galaxy S2 device-width: 320 px dispositivo-altura: 534px -webkit-device-pixel-ratio: 1,5 (min-moz-device-pixel-ratio: 1,5), (-o-min-device-pixel-relación de: 3/2), (min-device-pixel-ratio: 1.5
10. Samsung Galaxy S3 device-width: 320px device-height: 640px-webkit-device-pixel-ratio: 2 (min mo moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
11. Samsung Galaxy S4 device-width: 320px device-height: 640px-webkit-device-pixel-ratio: 3
12. LG Nexus 4 device-width: 384px device-height: 592px-webkit-device-pixel-ratio: 2
13. Dispositivo Asus Nexus 7-ancho: 601px dispositivo-alto: 906px -webkit-min-device-pixel-ratio: 1.331) y (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 y 2, iPad Mini dispositivo-ancho: 768px dispositivo-altura: 1024px-webkit-dispositivo-relación de píxeles: 1
15. iPad 3 y 4 dispositivo-ancho: 768px device-height: 1024px-webkit-device-pixel-ratio: 2)
16. iPhone 3G device-width: 320px device-height: 480px-webkit-device-pixel-ratio: 1)
17. iPhone 4 device-width: 320px device-height: 480px-webkit-device-pixel-ratio: 2)
18. iPhone 5 device-width: 320px device-height: 568px-webkit-device-pixel-ratio: 2)

No Es una cuestión 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. 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 número de píxeles y la relación de píxeles del dispositivo, lo que resulta en una "resolución virtual" que es lo que realmente debe tener en cuenta al diseñar su página: si su fuente es de 10px de ancho fijo y la" resolución horizontal virtual " es de 300 px, se necesitarán 30 caracteres para llenar una línea.

Dado que hay muchos tamaños de pantalla variables que siempre cambian y lo más probable es que siempre cambien, la mejor manera de hacerlo es basar sus puntos de interrupción y mediaqueries 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. Reduzca la pantalla lentamente para hacerla más estrecha. Observe para ver cuando el diseño comienza a, "romper", o mirar horrible y estrecho. En este punto, un punto de interrupción con una consulta de medios sería requerir.

Es común crear tres conjuntos de consultas de medios para escritorio, tableta y teléfono. 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. Hazlo según sea necesario.

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

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

Hoy en día lo más común es ver dispositivos retina-screen, en otras palabras: dispositivos con altas resoluciones y una densidad de píxeles muy alta (pero generalmente más pequeños que 6 pulgadas de tamaño físico). Es por eso que usted necesitará retina display especializada media-consultas 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

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

@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

    }