Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Script to Load Different .css Depending On Screen Resolution

Discussion in 'Programming' started by Newton360, Oct 21, 2010.

  1. Newton360

    Newton360 New Member Webmaster

    Hey all, I've never posted in the Website Design forum before, but i had a useful script I thought I'd share with you. This is a relatively simple JavaScript which lets you specify different .css style sheets to correspond with different screen resolutions.

    Put the following code between the <head> </head> tags of your site:

    <script type="text/javascript">

    function getcss(cssfile){

    loadcss = document.createElement('link')

    loadcss.setAttribute("rel", "stylesheet")

    loadcss.setAttribute("type", "text/css")

    loadcss.setAttribute("href", cssfile)



    if(screen.width <= '800')
    // Defines the resolution range you're targeting (less than 800 pixels wide in this case)


    // Defines the .css file you want to load for this range (800x600.css)


    else if(screen.width > '800' && screen.width < '1280')
    // This time we're targeting all resolutions between 800 and 1280 pixels wide


    //And we want to load the .css file named "1024x768.css"


    else if(screen.width > '1024' && screen.width < '1600')
    //Targeting screen resolutions between 1024 and 1600px wide


    //Load 1280x1024.css




    //This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css



    I use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of my site.

Featured Resources (View All)

Share This Page