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
[ad#Google Adsense-1]
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