El otro día, en la cena de despedida de un compañero, surgió una extraña discusión sobre responsive design o diseño adaptativo en español (sí, ya sé, no es un tema muy normal para una cena). Uno de los presentes aseguraba que era necesario javascript para que se cambiasen los estilos que se aplican en base a la resolución de la pantalla. Yo le dije que no, que no era necesario, que con media queries era suficiente. Entonces me dijo que “no tienes ni puta idea” (¿piensa el ladrón que todos son de su condición?) y yo le respondí que “te mereces un post de nocompila”.
Y aquí me tenéis escribiendo el post, para demostrar que no hace falta javascript para que el estilo de una página se adapte.
Empecemos por el principio ¿qué son las media queries? En CSS 2 teníamos la posibilidad de distinguir entre distintos medios a la hora de especificar el estilo:
@media screen {
* { font-family: sans-serif }
}
@media print {
* { font-family: serif }
}
En CSS3 podemos combinar el media type con una o mas expresiones evaluables que devuelven true o false. Si devuelve true se aplica los estilos que contiene. Por ejemplo
@media (max-width: 450px ){...}
@media (min-width: 451px) and (max-width: 767px) {...}
@media (min-width: 768px) {...}
Para aplicar un estilo a todos los media types en una media query de CSS3 se puede dejar en blanco el media type o se puede poner all. Si prefieres separar los estilos en ficheros css distintos se pueden indicar la media query en el atributo media del link css por ejemplo: <link rel="stylesheet" type="text/css" href="portrait.css" media="all and (orientation: portrait)">
<link rel="stylesheet" type="text/css" href="landscape.css" media="all and (orientation: landscape)">
A continuación pongo un ejemplo. El código está en un único fichero, en vez de separar el html de las css. La finalidad es mostrar como se modifica el estilo en tiempo real a medida que se redimensiona la página sin necesidad de javascript.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MediaQueriesSample</title>
<style>
@media screen and (max-width: 450px )
{
body{
font-size:small;
}
#nocompila{
max-width:350px;
}
#grande{
display:none;
}
#medio{
display:none;
}
#indy{
max-width:300px;
}
}
@media (min-width: 451px) and (max-width: 767px) {
body{
font-size:medium
}
#nocompila{
display:none
}
#grande{
display:none;
}
#pequeno{
display:none;
}
#indy{
max-width:350px;
}
}
@media (min-width: 768px){
body{
font-size:larger;
}
#nocompila{
display:none
}
#medio{
display:none;
}
#pequeno{
display:none;
}
}
</style>
</head>
<body>
<img src="img/nocompila350.png" id="nocompila" />
<h1>Media Queries</h1>
<h2>Prueba de uso de media queries con CSS3</h2>
<div id="content">
Esta página cambia los estilos que se aplican en tres resoluciones distintas
<ul>
<li>768 o más</li>
<li>entre 451 y 767 </li>
<li>450 o menos</li>
</ul>
</div>
<div>
<img id="indy" src="img/indy01.gif" />
</div>
<div id="grande">Modo grande, resolución de 768 o superior</div>
<div id="medio">Modo medio, resolución entre 767 y 451</div>
<div id="pequeno">Modo pequeño, resolución de 450 o inferior</div>
</body>
</html>
Si lo que buscáis son ideas, inspiración o diseños interesantes, lo mejor es que visitéis MediaQueri.es. En este sitio se puede ver el diseño de distintas webs con la vista previa de cada una de sus vistas.
A estas alturas del post, mi querido amigo habrá visto que no hace falta javascript. Así que recordad que el uso de media queries para adaptar la visualización del contenido de la web según condiciones como orientación de dispositivo, resolución de la pantalla, etc. no requiere javascript.
Hay que tener en cuenta que CSS3 es soportado por las últimas versiones de los navegadores. En el caso de Internet Explorer hablamos de la versión 9 o superior, en los otros navegadores da igual, porque la actualización es gratis.
IE8 se lanzó el 19 de marzo de 2009 y la recomendación de media queries en CSS3 es del 19 de Junio 2012. De todas formas existen unos ficheros javascript para hacer funcionar las media quieres de CSS3 en este veterano navegador.
No hay comentarios:
Publicar un comentario