CODEWITHSUNDEEP
javascripthtmlcss
mitesh shah
mitesh shah

Reputation: 31

Change the .css files based on the clients browser size

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.

Upvotes: 1

Views: 758

Answers (1)

Janis Lankovskis
Janis Lankovskis

Reputation: 1040

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

Upvotes: 7

Related Questions