En estos tiempos en que hay una gran variedad de dispositivos que visitan nuestra pagina, nos vemos obligados a tener varias versiones de nuestra pagina para ajustarla al estilo de todos ellos.
Con la llegada de CSS3, llega una herramienta muy interesante para adaptar nuestros diseños web a cualquier tipo de pantalla, los condicionales.
Mediante el uso de condicionales, podemos definir unos estilos concretos según las características del dispositivo de nuestro visitante.
En este caso veremos un ejemplo básico en el que nuestro div «contenedor» tendrá un ancho por defecto de 960px, pero si alguien nos visita con una resolución mayor (mínimo 1200px), podemos ampliar el tamaño del div.
#contenedor {
width:960px;
margin:0 auto;
}
#logo a {
display:block;
width:300px;
height:200px;
background:url('images/logo.png) no-repeat;
}
@media screen and (min-width: 1200px) {
#contenedor {
width:1100px;
}
#logo a {
width:400px;
height:250px;
background:url('images/logo-grande.png) no-repeat;
}
}
Cómo veis, el condicional que hemos puesto, es que el media sea («screen»), es decir, estemos mostrando la web por pantalla, y que el ancho mínimo del navegador sea de 1200px. Con esto cambiamos el ancho del div contenedor y cambiamos la imagen del logo de nuestra pagina por uno mayor.
La única pega de este método es que de nuestros queridísimos Internet Explorers sólo el último (Internet Explorer 9) entiende el comando @media, así que el resto verán las webs como siempre.
Para acabar, os dejo un par de ejemplos de paginas que ulitizan este método de forma magistral:
