网页适应不同分辨率最简单的方法
---------------------------------------------------------------------------------------
今天帮人做网页，做到最后找我哥验证Bug，发现在不同分辨率下表格和DIV层严重错乱，怎么设置层的边距都无法满足各种分辨率的需要，网上看了很多方法不是JS判断客户端就是定义一大堆CSS，最后终于找到个简单点的。请见文中红色部分。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页适应不同分辨率最简单的方法</title>
<style type="text/css">
<!--
body { margin:0; padding:0; } //这句不是必需，但是能解决某些浏览器上边距留白的问题~
#center {
width:778px; //视网页宽度而定
margin:0 auto; //意思是网页上下边距为0，左右边距自适应
}
-->
</style>
</head>
<body>
<div id="center">
网页适应不同分辨率最简单的方法：
在网页所有内容外嵌套一个总的DIV层，如本例中的"center"，定义"center"的CSS如上所示即可~
</div>
</body>
</html>
调用不同的CSS
------------------------------------------------------------------------------------
<script>
if (screen.width==800||screen.height==600)
document.writeln("<link rel=\"stylesheet\" href=\"skin\/style\/yyyblog\/800.css\" type=\"text\/css\" \/>")
else
document.writeln("<link rel=\"stylesheet\" href=\"skin\/style\/yyyblog\/1024.css\" type=\"text\/css\" \/>")
</script>
说明：如果分辨率是800*600则调用\skin\style\yyyblog\800.css，否则调用\skin\style\yyyblog\1024.css。
好处：自动适应不同分辨率，对我来说布局的协调性可以很好的控制。
坏处：某些用户安全措施比较高的话该脚本完全无效，导致面目全非。（对于我们把内容和表现分离的网站来说把表现去掉是什么后果不用我说了。）
总结：能不用就不用。
3787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
