Change the .css files based on the clients browser size

Question

I want to change the .css files based on the width of the browser the client is using. For that i am using the following function:

function changeLayout(description) {
    var i, a;
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("title") == description) { a.disabled = false;}
         else if (a.getAttribute("title") != "default") { a.disabled = true;}
     }
}

The above function works fine with

<head>
     <title></title>
     <link href="css/style.css" rel="stylesheet" type="text/css" title="default" />
     <link href="css/style1024.css" rel="alternate stylesheet" type="text/css"       title="style1024" />
     <link href="css/style1280.css" rel="alternate stylesheet" type="text/css" title="style1280" />
 </head>

The problem which i am facing is that when the page loads the style that is applied is always the default.css where as the browser window which i am finding is having the width of 1280. If i changed the screen resolution then the style get applies properly. Only after the page refresh or for the loading of it it applies the default style.

Any idea on it would be appreciated.

Thank You.

Janis Lankovskis · Accepted Answer · 2011-10-06 11:30:45Z

7

use media queries

css:

@media screen and (max-width: 960px) 
{
   /* your rules or imports */
   @import url('/css/styles.css');
}

more: http://webdesignerwall.com/tutorials/css3-media-queries

answered Oct 6, 2011 at 11:30

Janis Lankovskis

1,0409 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change the .css files based on the clients browser size

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related