Mostar un CSS seg├║n la resoluci├│n de pantalla

1

El dise├▒o por medio de CSS nos permite ahorrar muchas l├şneas de c├│digo, haciendo que nuestro sitio sea liviano, consuma menos recursos de nuestro servidor, y sea limpio y amigable para los robots de los buscadores. Pero no todo lo que brilla es oro, y as├ş como tiene muchos beneficios, tambi├ęn tiene sus inconvenientes, y uno de estos es el problema de las resoluciones de pantallas.

cambiar-CSS-resolucion-de-pantalla

Existen muchas resoluciones diferentes para un solo monitor, pero la tecnolog├şa hace su aporte y cada vez tenemos m├ís dispositivos m├│viles que navegan en la web, como lo son el iPhone, el Ipad etc. Estos gadgets son una soluci├│n para los usuarios, pero suman trabajo a los dise├▒adores webs ya que cada vez surgen mas resoluciones de pantalla a los que tenemos que adaptar nuestros dise├▒os.

Para solucionar este inconveniente, esta Adapt.js un archivo java muy liviano (894 bytes) que antes lee que resoluci├│n de pantalla tiene cada visitante y determina que CSS tiene que cargar, ya sea una tablet, un dispositivo m├│vil o un monitor.

Para poder utilizarlo simplemente debemos incluir Adapt.js en el head de nuestro sitio.

// Configuraci├│n
var ADAPT_CONFIG = {
  // Donde estan tus hojas de estilo?
  path: 'assets/css/',
 
  // false = Solo se corre un vez, cuando la página carga
  // true = Se adapta dinámicamente ante un cambio de resolución
  dynamic: true,
 
  // Primer rango para una resoluci├│n m├şnima.
  // Ultimo rango para una resolución máxima.
  // Necesita tener un "to" declarado dentro del rango.
  range: [
    '760px            = mobile.css',
    '760px  to 960px  = 720.css',
    '960px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1920px           = fluid.css'
  ]
};
Quizas te interese   Classic Luxury: template XHTML de gran calidad gratuito
// false = Solo se corre un vez, cuando la p├ígina carga // true = Se adapta din├ímicamente ante un cambio de resoluci├│n dynamic: true, // Primer rango para una resoluci├│n m├şnima. // Ultimo rango para una resoluci├│n m├íxima. // Necesita tener un "to" declarado dentro del rango. range: [ '760px = mobile.css', '760px to 960px = 720.css', '960px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ] };

Es probable que muchos usuarios desactiven el Java desde el navegador, en ese caso el autor nos recomienda usar noscript dentro del head sirviendo un CSS para m├│viles, donde es mas probable que javascript este desactivado.

Link: adapt.960.gs | Via eliseos.net

1 COMENTARIO

Dejar una respuesta

Please enter your comment!
Please enter your name here