Adapt.js is a simple tiny JavaScript library that allows you to develop web pages that automatically adjust themselves to the web browser screen size. The Adapt.js library dynamically checks the width of the web browser and serves the CSS file for that width.
The following video shows how simple it is to use this library and how Adapt.js dynamically load the relevant CSS file when the web browser width changes.
The code shown in this video clip is available below. Make sure you fix the relative links to the JavaScript and the CSS files.
<!DOCTYPE html>
<html>
<head>
<title>Adapt.js Jump Start</title>
<script>
var ADAPT_CONFIG = {
path: 'css/',
dynamic: true,
range: [
'0px to 720px = mobile.min.css',
'720px to 980px = 720.min.css',
'980px to 1280px = 980.min.css',
'1280px = 1280.min.css'
]
};
</script>
<script src="js/adapt.min.js"></script>
</head>
<body>
<h1>Adapt.js Jump Start</h1>
</body>
</html>
You can find the complete sample with all the other files it uses as well as slides and video clips for learning how to use the Adapt.js library in my new Adapt.js Basics free course at http://abelski.lifemichael.com.
