Cargar CSS según Resolución

Por Noticias3

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.

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());
});
});

Para descargar los archivos del ejemplo hacé click aquí

Imagenes y fuente del artículo: Css-Tricks

3 comentarios

  • Javier Delgado

    14 octubre, 2017 at 2:30 pm

    Buenas tardes. Éste método carga la web más ligero que tenerlo todo en un solo archivo css? mediante @media

    Responder

    • sessionstudio

      16 octubre, 2017 at 9:35 pm

      Hola Javier, si el css con todos los estilos es muy grande, si conviene realizar este método.
      Si el css no es muy pesado no creo que se note diferencia en la carga de una web. El método sirve como ejemplo, pero puede ser aplicado para múltiples funciones, requeridad por cada resolución.-
      Gracias por tu comentario! Saludos!

      Responder

  • 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 *