使用javascript根据分辨率更改css文件
我在网站上找到了它，但对我来说似乎不起作用。 问题是CSS没有改变或改变得很快，我能看到的只是黑色闪光和空白页面（http://gino.net16.net/inde.php，可以用firefox清楚地看到）。因为我没有javascript技能，所以我不知道出了什么问题。
主文件
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>
</head>
<body onLoad="redirectCSS()">
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
css样式文件
@charset "utf-8";
/* CSS Document */
body {
background-color: #2a2725;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 1px #2a2725;
color: #fff;
}
/* }}} END TableSorter */
I found it on website but for me it seems doesn't work.
The problem is that css doesn't change or changes very fast all i can see is black flash and blank page(http://gino.net16.net/inde.php it can be clearly see with firefox).Since i have no javascript skills , so i don't know what's wrong.
Main file
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>
</head>
<body onLoad="redirectCSS()">
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
css style file
@charset "utf-8";
/* CSS Document */
body {
background-color: #2a2725;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 1px #2a2725;
color: #fff;
}
/* }}} END TableSorter */
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试使用 CSS 媒体查询，它们正是您想要的:)
Try using CSS Media Queries, they do exactly what you want :)
您正在覆盖页面的内容。
onload后的document.write覆盖整个页面。您需要在页面加载时执行标头中的 JavaScript，而不是将其放入函数中。更多说明：
1) 请记住为不想或不能支持 JavaScript 的用户和浏览器添加一个不使用 JavaScript 的“通用”样式表。
2)
language="JavaScript"已过时。请改用type="text/javascript"。3) 无需“注释掉”JavaScript
4) 请记住，屏幕尺寸与视口（浏览器窗口）尺寸无关。并不是每个人都会最大化浏览器窗口。
5) 最重要的是：没有真正的理由再为此使用 JavaScript。除非你真的真的需要支持 IE，那么你可以使用 CSS3 媒体查询。请参阅此问题的示例：使用 CSS 的流体布局
You are overwriting the content of the page.
document.writeafteronloadoverwrites the whole page. Instead of putting it in a function, you need to execute the JavaScript in the header while the page is loading.Some more remarks:
1) Remember to incude a "general" stylesheet without using JavaScript, for the users and browsers who don't want to or can't support JavaScript.
2)
language="JavaScript"is out-of-date. Usetype="text/javascript"instead.3) It's no need to "comment out" the JavaScript
4) Keep in mind that the screen size has nothing to do with the view port (browser window) size. No everyone maximizes their browser window.
5) And most importantly: There is no real reason to use JavaScript for this anymore. Unless you really, really, really need to support IE, then you can use CSS3 Media Queries. See this question for an example: Fluid layouts with CSS
您可能永远不会在页面加载后执行 document.write 。
您需要像这样内联调用该函数（如果您也有不同的 css 文件，它会有所帮助），
如果我必须这样做，我个人会这样做：
You may NEVER do a document.write after page load.
You need to call the function inline like this (and it helps if you have different css files too)
I would personally do this if I had to do it:
不确定它是否能正常工作，在某些情况下，您的布局总是会出现问题。
css 的标准声明：
即使您调整视图大小，浏览器也会更改视图。
Not sure that it works well, in some cases you always will have a problem with your layouts.
Standard declaration for css:
Browser will change a view even when you resize it.