I. CSS (hojas de estilo en cascada)
6. CSS avanzados
6.4. Responsive design
Esta página contiene información difícil de aplicar en EducaMadrid. De todas formas el contenido os resultará práctico e interesante si queréis saber cómo se hace una web para móviles u otros dispositivos.
Qué es el responsive design
El objetivo del diseño adaptable o responsive design es conseguir que la presentación de las páginas se adapte al dispositivo utilizado: que se vean bien, y de diferente manera si es necesario, se consulten con el aparato que se consulten (un ordenador de sobremesa, un móvil, una tablet, un portátil...).
Cómo se consigue
Utilizando las llamadas CSS Media Queries. Sirven para introducir una serie de definiciones CSS que se aplicarán solo si una determinada condición se cumple. Ejemplo:
@media only screen and (max-width: 768px) {
body {
background : black;
color : white;
}
}El código anterior dice que la etiqueta BODY tendrá color de fondo negro y texto blanco, pero solo cuando se trate de una pantalla y la resolución de la misma tenga un máximo de 768 píxeles de ancho.
Cómo sacarles partido
Podemos definir una presentación general para las páginas y después ir añadiendo reglas que se aplicarán en una u otra circunstancia. De esta manera conseguimos que nuestras páginas se vean bien en diferentes dispositivos. Un ejemplo:
- Hago que mis páginas tengan 2 columnas.
- Si el ancho de la pantalla es inferior a 960 píxeles, hago que las columnas desaparezcan para que el texto se siga leyendo bien.
Podéis ver el ejemplo en un navegador. Para ver cómo funciona no tenéis más que ir reduciendo el tamaño del navegador. Cuando mida menos de 960 píxeles de ancho, las columnas desaparecerán.
CSS Media Queries en hojas de estilo externas
Al principio de esta unidad vimos que hay varias formas de añadir código CSS.
Podríamos crear una hoja de estilos CSS para un determinado caso. Para una resolución de pantalla inferior a 800 píxeles, por ejemplo:
<link rel="stylesheet" media="(max-width: 800px)" href="miArchivo.css" />Responsive design en EducaMadrid
En la pestaña Avanzado del Diseñador Web podemos escribir lo que queramos, de manera que ahí podríamos incluir CSS Media Queries. Sin embargo, el portal EducaMadrid tiene un sistema propio para conseguir el diseño adaptable, y los CSS definidos por el usuario dejan de aplicarse cuando la resolución de pantalla es inferior a 979 píxeles, de manera que, al menos de momento, no podremos controlar la presentación de nuestras páginas del portal en dispositivos móviles.