Diseño web Rosario Sessionstudio

Cargar CSS según Resolución

sessionstudio

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.

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

Para descargar los archivos del ejemplo hacé click aquí

Imagenes y fuente del artículo: Css-Tricks

Salir de la versión móvil