Selecting a style sheet based on screen width
The following code when placed in the head section of a page will always load the 800.css style sheet, however if JavaScript is enabled on the browser and the screen width is 1280 pixels or more then the style sheet 1280.css is also loaded allowing elements from the 800.css sheet to be overridden and adjusted for the larger display area.
Adjustments may include the loading of larger background images for the higher resolution screens.
Code:
<link href="800.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
if(screen.width >= 1280) document.write("<link href='1280.css' rel='stylesheet' type='text/css' />");
//]]>
</script>
The if statement can be repeated to add more levels if required e.g.
Code:
if(screen.width >= 1280) document.write("<link href='1280.css' rel='stylesheet' type='text/css' />");
if(screen.width >= 1920) document.write("<link href='1920.css' rel='styles
|