Original article: Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes

Crear una página web era mucho más sencillo antes. Ahora el diseño de una página web ha de adaptarse no solo a los ordenadores, sino también a las tablets, móviles e incluso los televisores.

Crear una página web con un diseño flexible se llama Diseño Web Responsivo y las consultas de medios CSS son uno de los elementos más importantes del Diseño Responsivo. En este artículo profundizaremos en las consultas de medios y cómo usarlas en CSS.

¿Qué es una consulta de medios?

Una consulta de medios es un componente de CSS3 que hace que una página web adapte su diseño a diferentes tamaños de pantalla y tipos de medios.

Sintaxis

@media media type and (condition: breakpoint) {
  // reglas CSS
}

Podemos establecer diferentes tipos de medios bajo una variedad de condiciones. Si la condición y/o el tipo de medio se cumplen, la regla dentro de la consulta de medios se aplicará.

La sintaxis pueda parecer un poco complicada al principio, así que vamos a explicar cada parte en más detalle...

La regla @ media

Comenzamos definiendo la consulta de medios con la regla @media y después incluimos las reglas CSS entre los paréntesis. La regla @media también se usa para especificar los tipos de medios.

@media () {
  // reglas CSS
}

Paréntesis

Dentro de los paréntesis establecemos una condición. Por ejemplo, quiero aplicar un tamaño de fuente mayor en los teléfonos móviles. Para hacer esto, necesitamos establecer un ancho máximo que compruebe el ancho de un dispositivo:

.texto {
  font-size: 14px;
}

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

El tamaño del texto es de 14px. Sin embargo, como hemos aplicado una consulta de medios, el tamaño del texto será de 16px cuando el ancho máximo del dispositivo sea de 480px o menos.

Importante: añade tus consultas de medios siempre al final de tu documento CSS.

Tipo de medios

Si no establecemos ningún tipo de medio, la regla @media selecciona todos los dispositivos por defecto. Los tipos de medios se aplican justo a continuación de la regla @media. Existen muchos tipos de dispositivos, pero podemos agruparlos en 4 categorías:

  • all — para todo los tipos de medios
  • print — para impresoras
  • screen — para pantallas de ordenador, tablets y smartphones
  • speech — para lectores de pantalla que "leen" la página en voz alta

Por ejemplo, si quiero seleccionar solo pantallas, usaré la palabra screen justo después de la regla @media. También tengo que unir ambas reglas con la palabra "and":

@media screen and (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Breakpoints

El breakpoint es quizás uno de los conceptos que escuches y uses más a menudo. Un breakpoint es esencial a la hora de determinar cuándo cambiar el diseño y adaptar las reglas dentro de las consultas de medios. Volvamos a nuestro ejemplo del principio:

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Aquí el breakpoint es 480px. La consulta de medios sabe cuándo establecer o sobreescribir la nueva clase. Básicamente, si el ancho de un dispositivo es menos de 480px, la clase texto se aplicará, si no, no.

Breakpoints comunes: ¿existe una resolución estándar?

Una de las cuestiones que más se pregunta es “¿Qué breakpoint tengo que usar?”. Existen una gran cantidad de dispositivos en el mercado, con lo que no podemos ni debemos definir breakpoints fijos para cada uno de ellos.

Por ello, no podemos decir que existe una resolución estándar para todos los dispositivos, sino breakpoints de uso común en el día a día de la programación. Si estás utilizando un framework CSS (como Bootstrap, Bulma, etc.) también puedes usar sus breakpoints.

Vamos a ver ahora los breakpoints comunes según el ancho de los dispositivos:

  • 320px — 480px: Dispositivos móviles
  • 481px — 768px: iPads, tablets
  • 769px — 1024px: pantallas pequeñas, ordenadores portátiles
  • 1025px — 1200px: pantallas grandes, ordenadores de escritorio
  • 1201px y más —  pantallas extra-grandes, televisores

Como menciono anteriormente, estos breakpoints son flexibles, ya que no existe una definición estándar, sino algunos de uso común.

Conclusión

El diseño responsivo es actualmente imprescindible en el mundo del diseño y desarrollo web. Las consultas de medios son una de las partes más importantes para crear diseños responsivos. Espero que mi artículo te ayude a comprender cómo funcionan las consultas de medios.

Si quieres aprender más sobre desarrollo web, suscríbete gratis a mi canal.

¡Gracias por leer mi artículo!