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
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
Para los estilos específicos dentro del @media (max-width:600px)
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
+ There are no comments
Add yours