sizeit.js is a JavaScript utility that detects the screen size and loads external css based on the settings you configure. Works kinda like media queries.
This sentence will appear on small screens
(like phones)
This sentence will appear on medium screens
(like tablets)
This sentence will appear on large screens
(like desktops)
Use sizeit to get the width of the browser window
Assign a name to the size configurations for use in other scripts
Embed the script in the head of your page. Configure breakpoints and link to css stylesheets for each of the sizes you wish to target. For example, to target small (phones), medium (tablets) and large (desktop), you could configure it as follows.
<!-- Required viewport setting for sizeit to work on devices -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Do sizeit in the head so CSS is dynamically added first -->
<script src="sizeit.min.js"></script>
<script>
sizeit.configure(
{
max: 600,
css: "css/small.css",
name: "small"
},
{
max: 1024,
css: "css/medium.css",
name: "medium"
},
{
css: "css/large.css",
name: "large"
}
);
</script>For each setting you wish to have, set these parameters:
Other stuff by me
johnpolacek.github.com