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.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Gracias por el aporte Pedro. Yo la verdad, siempre maqueto para la mas baja resolución, de tal forma que sea visible para las mas altas. Esta es otra alternativa viable. Saludos.