Media queries

por Natalia Ventre el 14/05/2013 ・ podés leerlo en 3 minutos ・

Las medias queries (consultas de medios) son una de las bases del diseño web adaptable y consisten en:

  • Un tipo de medio: por ej. print (páginas impresas), screen (pantallas a color) y all (todos).
  • Una o más expresiones, que involucran características del medio y que son verdaderas o falsas, por ej. device-aspect-ratio (orientación retrato o apaisado), device-width (ancho del dispositivo de salida), resolution (resolución), width (ancho de la superficie de renderizado).

Meta viewport

  • El viewport visual es la parte de la página que se está mostrando en la pantalla. El usuario puede hacer scroll para cambiar la parte de la pantalla que ve o hacer zoom para cambiar el tamaño del viewport visual.
  • El viewport de layout es más grande que el viewport visual y es a partir del cual CSS calculan las medidas en porcentajes.
<meta name="viewport" content="width=device-width">

Con la meta viewport se puede configurar que el viewport de layout sea igual al ancho del dispositivo para que las declaraciones CSS como por ej. width: 60% se calculen respetando la intención del diseño.

Breakpoints

Un enfoque es elegir los breakpoints según el tamaño de dispositivos populares. El problema con este enfoque es que no es amigable con el futuro, porque dispositivos que hoy son populares podrían no serlo mañana.

Ej. de mixin en Sass:

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 1249px) { @content; }
  }
  @else if $point == landscape-ipad  {
    @media (min-width: 1023px) { @content; }
  }
  @else if $point == portrait-ipad {
    @media (min-width: 767px) { @content; }
  }
  @else if $point == landscape-iphone {
    @media (min-width: 479px)  { @content; }
  }
}

.box {
  background-color: #eee;
  @include breakpoint(landscape-ipad)   { width: 75%; }
  @include breakpoint(landscape-ipad)   { width: 60%; }
  @include breakpoint(portrait-ipad)    { width: 80%; }
  @include breakpoint(landscape-iphone) { width: 95%; }
}

El otro enfoque es elegir los breakpoints según el contenido, simplemente cambiando el tamaño del navegador y determinando en qué punto el diseño necesita un ajuste.

Ej. de mixin en Sass:

@mixin adaptarse-a($query, $type:min-width){
  @media ($type: $query){
    @content
  }
}

.box{
  background-color: #eee;
  width: 90%;

  @include adaptarse-a(48em){
    width: 60%;
  }
}
  • mixin adaptarse-a: Con el mixin es más fácil modificar un estilo porque las declaraciones están todas juntas, en vez de estar separadas en diversas declaraciones media.
  • min-width vs max-width: En la filosofía Mobile first las media queries se definen con min-width1. Empezás con estilos CSS para las pantallas más pequeñas y vas añadiendo media queries y CSS para que el diseño se adapte a pantallas más grandes.
  • em vs px: Usar “em” para los breakpoints es más a prueba de balas, hace que el diseño se ajuste también cuando el usuario hace zoom.

Alta definición

Para detectar dispositivos de alta resolución e incluir imágenes de fondo apropiadas u otros ajustes:

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi)
{ /* Sólo Retina (iPhone, iPad) */ }

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi)
{ /* Dispositivos de alta resolución (genéricos) */ }

Bourbon tiene un mixin para generar una media query para dispositivos de alta resolución. Acepta como parámetro opcional el pixel ratio.

.foo{
  @include hidpi(1.5) {
    background-image: url(fondo@2px.png);
  }
}

Resumen

  1. Usar la meta viewport para RWD (diseño web adaptable).
  2. Definir los breakpoints en min-width y ems según el contenido.

  1. Respond.js es un polyfill para CSS3 media queries en IE 6-8.