andrewhoule:

Designing websites for devices that vary from a mobile phone to a large screen tv can be a daunting task. Media queries are picking up steam and are a great way to create a responsive design. Adapt.js takes a slightly different approach. Here’s how it’s described:

Adapt.js is a lightweight (947 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions. Other methods include: building a separate site for mobile, or using a media queries to adjust layouts dynamically, with a polyfill for older browser support. Also a factor is how to handle image resolutions.

Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed. A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB).