intive Argentina Blog

Responsive design & media queries 101: ¿cuáles son los media queries más útiles? (Un enfoque personal)

Desde hace un tiempo que la navegación y el consumo de información de internet no son prácticas que realizamos exclusivamente desde un único dispositivo, lo que obliga a que cada sitio se adapte a los diferentes formatos y medidas. Es decir, ser responsivo. Como usuario, espero poder utilizar una página de tres «modos»: celular, desktop e intermedio -para cuando no deseo utilizar la ventana maximizada en la desktop-. Entonces, al matchearlo con Bootstrap (un framework de código abierto desarrollado en 2011 que permite crear sitios responsivos sin complicaciones), quedarían las siguientes medidas:

  1. Celular: max-width 767px.
  2. “Algo intermedio”: Bootstrap tiene dos: 767px < width < 960px < width < 1200px
  3. Desktop: min-width 1200px.

 

Background técnico

Sigo poniéndome en el rol de usuario. Entonces, las primeras exigencias en las que pienso son: “Ey, un celular, aunque sea FHD con 1080px de ancho, quiero que pertenezca al primer modo (celular) y un monitor, aunque tenga la misma resolución que ese celular, lo pretendo en modo desktop”.

Resulta que 1px físico no es necesariamente igual a 1px en CSS. Cada vendor/device/user agent define esta relación en la propiedad devicePixelRatio. En el celular, si tiene devicePixelRatio === 3, los 1080px se transforman en 360px, y cae así en el primer modo. Una curiosidad: ¿Dónde cae mi device? Los invito a hacer click y ver la reglita en el borde superior.

Ahí se ve el concepto de device-width = ancho físico / devicePixelRatio.

El browser, por defecto, toma el ancho físico. Ahí es cuando el meta tag viewport nos sirve para especificar de cuánto sería el ancho. Podemos elegir cualquier valor (px, cm, in…) pero, para que todo tenga sentido, debemos setearle el device-width. Por eso se ve esta línea de código por todos lados dentro del <head>: 

 

¿Qué sucede entonces?

Retomando el planteo inicial, confío en que “los de Bootstrap” saben lo que hacen, pero no encuentro del todo convincente que el primer breakpoint sea a los 768px. La mayoría de los celulares cae en un ancho menor a 400px, mientras que la tablet más pequeña arranca en 480px, por lo que utilizaría esa.

Con los valores intermedios, depende del contenido del sitio y la necesidad de mostrarse de distintas formas entre los 480px y 1200px. Si bien no soy usuario de tablet, consultando acerca de las medidas disponibles en el mercado, encuentro coherentes las divisiones intermedias que propone Bootstrap: 768px, 960px y 1200px o 1280px.

Respecto del tamaño desktop, me parece bien soportar desde monitores HD, es decir, desde 1280px.

Finalmente, es importante que el “modo” se modifique cuando el celular está en modo landscape:

También cuando el usuario -de Mac- tiene retina display (podría verse todo muy chico si no):

 

Las media queries más útiles

  • Para celulares: hasta 480px
  • Tamaños intermedios según necesidad: 768px, 960px y 1280px
  • Desktop: mayor a 1280px

    Y, por favor, no olviden el meta tag.

Espero que mi experiencia como usuario pueda serles de utilidad. Les dejo algunos links que pueden serles interesantes, como a mí:

Most common device breakpoints
Retina display media queries
You don’t need device specific breakpoints 
Combining meta viewport and media queries 
CSS Media queries
How to choose breakpoints
Use CSS media queries for responsiveness
Step by step breakpoints choosing
Most popular screen resolutions

Para quienes pretendan ir algo más allá del diseño responsivo y avanzar sobre las buenas prácticas de desarrollo web, les recomiendo especialmente estos links:

Artículos sobre todo lo que te puedas imaginar sobre responsive design. Patrones, ejemplos, y hasta un podcast
Webs fundamentales de Google, ¿qué más? 😉

Sebastián Bogado

Es desarrollador de full stack en intive – FDV. Ha trabajado con el stack de Javascript en varias plataformas (Televisores Smart & relojes Smart, NodeJS, aplicaciones híbridas móviles y – por supuesto – el navegador). En la actualidad estudia ingeniería informática en la Universidad de Buenos Aires (UBA), y está trabajando en su tesis de graduación.

Deja un comentario