Cargar CSS según Resolución

Por Noticias1

resolutiondeplayouts1-570x2601.jpg

Cambiar css dependiendo de la resolución de pantalla:

En esta entrada les voy a dejar un script que les va a permitir cargar diferentes hojas de estilos según la resolución de pantalla que se esté utilizando en el navegador

Dependiendo de la resolución vamos a cargar la web con 3 o 2 columnas o simplemente en 3 filas.

El script es muy sencillo y cargando las 3 hojas de estilos necesarias le van a otorgar al visitante una óptima visión del contenido de su web, cambiando las hojas de estilos según la resolución de pantalla.

[cc lang=”css”]function adjustStyle(width) {
width = parseInt(width);
if (width < 701) { $("#size-stylesheet").attr("href", "css/narrow.css“);
} else if ((width >= 701) && (width < 900)) { $("#size-stylesheet").attr("href", "css/medium.css“);
} else {
$(“#size-stylesheet”).attr(“href”, “css/wide.css“);
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
[/cc]

Ejemplo del script

Para descargar los archivos del ejemplo hacé click aquí

Imagenes y fuente del artículo: Css-Tricks

Un Comentario

  • Juanfran

    14 marzo, 2011 at 7:47 am

    Muy buen código, limpio, sencillo y útil. Gracias

    Responder

Comenta

Tu Email no será publicado. Campos requeridos *