javascript 使用javascript根据分辨率更改css文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4839346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing css file according to resolution with javascript
提问by Decker
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.
我在网站上找到了它，但对我来说似乎不起作用。问题是 css 没有变化或变化非常快，我只能看到黑色闪光和空白页面（http://gino.net16.net/inde.php，用 firefox 可以清楚地看到）。因为我没有javascript 技能，所以我不知道出了什么问题。
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
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 */
回答by Florian
Try using CSS Media Queries, they do exactly what you want :)
尝试使用CSS Media Queries，它们完全符合您的要求:)
回答by RoToRa
You are overwriting the content of the page. document.writeafter onloadoverwrites the whole page. Instead of putting it in a function, you need to execute the JavaScript in the header while the page is loading.
您正在覆盖页面的内容。document.write之后onload将覆盖整个页面。您需要在页面加载时执行标题中的 JavaScript，而不是将其放入函数中。
<script type="text/javascript">
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'>")}
}
</script>
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.
1) 记住为不想或不能支持 JavaScript 的用户和浏览器包含一个不使用 JavaScript 的“通用”样式表。
2) language="JavaScript"is out-of-date. Use type="text/javascript"instead.
2)language="JavaScript"过时了。使用type="text/javascript"来代替。
3) It's no need to "comment out" the JavaScript
3）不需要“注释掉”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.
4) 请记住，屏幕大小与视口（浏览器窗口）大小无关。不是每个人都会最大化他们的浏览器窗口。
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
5) 最重要的是：没有真正的理由再为此使用 JavaScript。除非你真的、真的、真的需要支持 IE，否则你可以使用CSS3 Media Queries。参见这个问题的例子：Fluid layouts with CSS
回答by Eugene Bosikov
Not sure that it works well, in some cases you always will have a problem with your layouts. Standard declaration for css:
不确定它是否运行良好，在某些情况下，您的布局总是会出现问题。css的标准声明：
link rel="stylesheet" type="text/css" href="css/style.css"
link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"
link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)"
href="css/medium.css"
link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"
Browser will change a view even when you resize it.
即使您调整视图大小，浏览器也会更改视图。
回答by mplungjan
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)
您可能永远不会在页面加载后执行 document.write。您需要像这样内联调用函数（如果您也有不同的 css 文件，它会有所帮助）
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='small.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='large.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
redirectCSS()
// End -->
</script>
</head>
<body >
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
I would personally do this if I had to do it:
如果我必须这样做，我会亲自这样做：
<html>
<head>
<title>my title</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript"><!-- Begin
var css = "";
if (screen.width < 800) css='small.css';
else if (screen.width < 1024) css='medium.css';
else css='large.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");
// End -->
</script>
</head>
<body >
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
