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   Tutorial - Mostrar cantidad de seguidores en Facebook, Twitter y Rss con PHP y 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' ] };

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