Quick Tip: Load CSS Based on Screen Resolution

To load some CSS files based on the screen resolution of the visitor, basically you just have to use some JavaScript like this:

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth < 750){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if ((screenwidth >= 750) && (screenwidth <= 950)){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if (screenwidth => 1024) {
document.write('<link rel="stylesheet" href="http://path.to/1024px.css" type="text/css" media="screen" />');
else {
document.write('<link rel="stylesheet" href="http://path.to/verylarge.css" type="text/css" media="screen" />');
}
</script>

Replace http://path.to/... with the path to your CSS files.

Obviously, you can change the values and add more or remove resolutions from it. To see it in action after applying it to your website, just resize your browser to see the layout change accordingly.

Please note: if you want to use a default stylesheet outside this JavaScript, set it like so:

rel="stylesheet"

And change rel="stylesheet" in the javascript above, to:

rel="alternate stylesheet"

[via techie-buzz]