[英]Changing css file according to resolution with javascript
我在网站上找到它，但对我来说似乎不起作用。 问题是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 */
尝试使用CSS媒体查询 ，他们完全按照你的意愿:)
您正在覆盖页面的内容。 onload之后的document.write覆盖整个页面。 您需要在页面加载时在标题中执行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>
还有一些评论：
1）对于不想或不能支持JavaScript的用户和浏览器，请记住在不使用JavaScript的情况下编写“常规”样式表。
2） language="JavaScript"已过时。 请改用type="text/javascript" 。
3）没有必要“注释掉”JavaScript
4）请记住，屏幕大小与视图端口（浏览器窗口）大小无关。 没有人最大化他们的浏览器窗口。
5）最重要的是：没有真正的理由再使用JavaScript了。 除非你真的，真的，真的需要支持IE，否则你可以使用CSS3媒体查询 。 请参阅此问题以获取示例： 使用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"
即使您调整视图大小，浏览器也会更改视图。
您可能永远不会在页面加载后执行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>
如果我不得不这样做，我个人会这样做：
<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>
根据分辨率更改背景图片-仅适用于JavaScript
[英]Changing the background image according to resolution - javascript only
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.