Quizás alguna vez hemos tenido la necesidad de aplicar estilos según la resolución de la página. En esta entrada aprenderemos como detectar dicha resolución y aplicarle estilos, gracias a Javascript.
El primer paso será cargar las hojas de estilo, la librería JQuery y nuestro código Javascript.
<link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="detect800.css"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="detect.js"></script> </head> <body> <div>El color de este texto es variable.</div> </body>
Vamos a detectar si la resolución del usuario es menor que 1024 x 768 píxeles. Si lo es, cambiaremos la hoja de estilos.
Como dije, crearemos 2 hojas de estilos, una llamada detect800.css, y otra detect1024.css, para las resoluciones 800 x 600 y 1024 x 768, respectivamente.
Por ejemplo, para la hoja de estilos detect800.css puede ser algo así:
div{
color: #006699;
font: 24px Helvetica, Georgia, serif;
}
Y para la hoja de estilos detect1024.css, insertaremos este código, por ejemplo:
div{
color: #006cff;
font: 22px "Trebuchet MS", sans-serif;
}
Detectando la resolución de la pantalla
Añadiremos una alerta Javascript que hará una pausa hasta que hagamos click en OK y consigamos ver el estilo anterior.
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Resolucion: 1024x768 o mayor');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Resolucion: Menos de 1024x768, a lo mejor es 800x600');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Asociaremos las 2 resoluciones a sus respectivos estilos, redirigiendo su dirección a otra hoja de estilos distinta. Ahora, desde que se está cargando reset.css en primer lugar, se añadirá el modificador :not(:first), así que esto no afectará al primer elemento.
La versión adaptada para sitios realizados en Drupal es esta:
$(document).ready(function() {
if ((screen.width<=1024)) {
filename="sites/all/themes/mytheme/1024.css"
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
document.getElementsByTagName("head")[0].appendChild(fileref)
}
});
Ejemplo de su funcionamiento
Finalmente, podemos ver un ejemplo de su funcionamiento o descargar el ejemplo.
