Source: https://www.puertopixel.com/mostar-un-css-segun-la-resolucion-de-pantalla/
Timestamp: 2020-06-05 08:55:57+00:00

Document:
🥇 Mostar un CSS según la resolución de pantalla Puerto Pixel | Recursos de Diseño
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.
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.
// Donde estan tus hojas de estilo?
// false = Solo se corre un vez, cuando la página carga
// true = Se adapta dinámicamente ante un cambio de resolución
// Primer rango para una resolución mínima.
// Ultimo rango para una resolución máxima.
// Necesita tener un "to" declarado dentro del rango.
// 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' ] };
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
Artículo anteriorAnimales vectorizados con estilo cartoon
Artículo siguienteIconos gratis para Aplicaciones Android
ZamsLancer octubre 27, 2012 At 1:41 pm
Hay problemas, el JS no es tan Efectivo que digamos.

References: resolución 
 resolución 
 resolución

 resolución 
 resolución 
 resolución 
 resolución 
 resolución