CSS media queries

CSS media queries


En el desarrollo de un sitio web responsive, debemos de tener en cuenta los media queries, conocidos también como @media, ya que nos van a permitir adaptar el contenido a la resolución del dispositivo en el que se va a visualizar.

Su funcionamiento es sencillo.  Se usan en las CSS, y son propias del lenguaje CSS3, por lo que sólo serán aptas para sitios web que se muestren en navegadores modernos (Chrome, Firefox, Safari, Opera e IE+9).

El código que se inserta en la CSS es el siguiente:

@media ("resolución") {
... los estilos para esa resolución
}

Es difícil encontrar los @media definitivos para un proyecto web. En internet, encontrarás diversas opiniones, pero la mejor recomendación es empezar a trabajar con el diseño móvil e ir añadiendo lo que se necesita para el resto de dispositivos.

En el diseño responsive, normalmente, se trabaja con 4 tipos de diseños:

  • Escritorio grande
  • Escritorio normal y Tablet horizontal
  • Móvil horizontal y Tablet vertical
  • Móvil vertical.

Teniendo en cuenta esto, se configurará la «resolución» del dispositivo dentro del @media(). Si además, se utiliza algún framework para realizar una maquetación responsive, como por ejemplo Bootstrap, pues lo ideal es utilizar las siguientes medidas:

CSS Media Queries recomendadas

CSS Media Queries recomendadas

Bootstrap emplea una técnica bottom-up, donde lo más importante es el móvil y lo menos importante es el escritorio. Así que tienes que empezar diseñando el sitio para el móvil y luego ir aumentando la ventana del navegador y añadiendo estilos donde corresponda.

Si estas acostumbrado a trabajar primero con escritorio, entonces utilizarás la técnica top-bottom, y empezando con el diseño para escritorio y acabando con la versión para móviles. Pero aunque parece la forma más lógica, la mayoría de los frameworks CSS, utilizan el modo bottom-up. 

Cambia el chip  y ve acostumbrándote, ya que será la forma más correcta de crear diseños responsive.

Ejemplo

Creamos una página llamada index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>
    <body>
 
    </body>
</html>

Después creamos la CSS con los estilos y utilizamos un @media para indicarle que los dispositivos con un ancho de 600px o más, tengan un color de fondo aguamarina, una fuente de 14px y sin negrita:

body {
    background: #f8cbde;
    font-size: 24px;
    font-weight: bold;
}

@media (min-width: 768px) {
    body {
        background: #e1f6e9;
        font-size: 14px;
        font-weight: normal;
    }
}

El resultado sería el siguiente:

Para los estilos normales declarados fuera del @media:

Estilos para el diseño móvil

Estilos para el diseño móvil

Para los estilos específicos dentro del @media (max-width:600px)

Estilos para el diseño móvil horizontal y tablet vertical

Estilos para el diseño móvil horizontal y tablet vertical

La definición de la regla @media se puede declarar en función de:

  • Anchura y altura de la ventana.
  • Anchura y altura del dispositivo.
  • Orientación.
  • Resolución.
  • Etc.

Puedes conocer más características en la web w3schools.

Por último, deberías conocer  los tamaños que se utilizan para las resoluciones más habituales de los dispositivos (móvil, tablet, portatil, ordenador, tv, etc). Estos tamaños o cortes para hacer los @media son:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Referencias

Introducción a las reglas @media de CSS3

Guía de desarrollo CSS – Mozilla Developer Network

+ No hay comentarios

Crear comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.