根据客户端浏览器的大小更改.css文件

Change the .css files based on the clients browser size

本文关键字：css 文件 客户端 浏览器      更新时间：2023-09-26

我想根据客户端正在使用的浏览器的宽度更改。css文件。为此，我使用以下函数:

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;}
     }
}

上面的函数使用

可以正常工作
<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>

我所面临的问题是，当页面加载应用的样式总是默认的。css，其中作为浏览器窗口，我发现是有1280的宽度。如果我改变了屏幕分辨率，那么样式get就会正确应用。只有在页面刷新或加载后，它才会应用默认样式。

如有任何意见，我将不胜感激。

谢谢。

使用媒体查询

css: 

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

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

相关文章：