我想根据客户端使用的浏览器的宽度更改 .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>
我面临的问题是，当页面加载时，应用的样式始终是 default.css，而我发现的浏览器窗口的宽度为 1280。如果我更改了屏幕分辨率，那么样式得到正确应用。只有在页面刷新或加载页面后，它才会应用默认样式。
如有任何想法，我们将不胜感激。
谢谢。
最佳答案
使用媒体查询
CSS:
@media screen and (max-width: 960px)
{
/* your rules or imports */
@import url('/css/styles.css');
}
关于javascript - 根据客户端浏览器大小更改 .css 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7673583/