(If you use Bootstrap...nothing to see here)With more and monitor sizes to deal with there are times when a website will need to load different cascading style sheets.  If you have a site that has a fixed grid, for example, and you do not want it to wrap or allow the user to alter the look, you may need to load multiple style sheets.

Here is one method. In the header section of your Master Page load a different style sheet based on monitor resolution.

<script type="text/javascript">
    var screenWidth = screen.availWidth;

     /*alert(screen.availWidth);*/

    if (screenWidth > 1024) {
        document.write('<link rel="stylesheet" type="text/css" href="main_highres.css"/>');
    }

    if (screenWidth <= 1024) {
        document.write('<link rel="stylesheet" type="text/css" href="main.css"/>');
     }
</script>