解决思路：
在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率，然后让页面或排版做出相应变化。
方法一：做为不同的分辨率做不同的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页
具体步骤：
1. 先捕获用户的分辨率。
水平分辨率：screen.width
垂直分辨率：screen.height
2.再用页面跳转的方法转到相应页。
location.replace(screen.width+".htm")
或者：
location.replace(screen.height+".htm")
3.完整代码。
<script language="JavaScript">
<!--
location.replace(screen.width+".htm");
//-->
</script>
技巧：screen.width 也可以改成 screen.availWidth。
提示：
l language="JavaScript" 指定脚本所用语言为 JavaScript,大部分浏览器的默认客户端脚本语言就是 JavaScript，所以也可以省略不写。
l <!-- 和 //--> 两个标识的作用是通知不支持 JavaScript 浏览器忽略两标识间的所有 JavaScript 代码，一般情况下可以省略不写。
l JavaScript 语句与 C 语言一样用分号”;”结束，但也可以省略不写，每一新行表示开始一条新语句。
l screen.width+".htm" 在进行字符串连接后得到诸如 800.htm，1024.htm 之类的文件名。
l 可以在把完整代码存成单独一页作为引导页。
试一试：读者可以试着用assign方法实现页面跳转。
方法二：根据文档显示区域宽度重新调整层的定位。
具体步骤：
1. 获取文档显示区域的宽度。
document.body.offsetWidth
2.判断对象是否为层。
function isLayer(obj){
with(obj.currentStyle)
return (position=="absolute"&&left!="")
}
3.完整代码。
<script language="JavaScript">
<!--
function isLayer(obj){ //判断对象是否为层的函数
/*不用 style 而用 currentStyle 的原因是因为有些层不是直接在标签内写 CSS 的，这时用 style 取不到值*/
with(obj.currentStyle) //返回布尔值true或false
return (position=="absolute"&&left!="")
}
//800为800X600分辨率下窗口最大化时document.body.offsetWidth的值
var iWidth=800
window.οnlοad=function init(){
//匹配页面中所有标签名为DIV元素，以数组形式返回对象
var divs=document.getElementsByTagName("DIV")
for(var i=0;i<divs.length;i++)//遍历所有DIV标签
if(isLayer(divs[i]))//判断对象是否为层，是则调整它的 X 坐标
divs[i].runtimeStyle.posLeft=parseInt(divs[i].currentStyle.left)+(document.body.offsetWidth-iWidth)/2
iWidth=document.body.offsetWidth //保存当前文档显示区域的宽度
}
//-->
</script>
<body οnresize="init()">
<div id=demo style="position:absolute;left:50px;top:100px;width:200px;height:200px;border:1px solid #000">Layer1</div>
<div id=demo1 style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2</div>
注意：
l 必须确保所有层的标签为 DIV。
l 程序中的 demo 和 demo1 两个层只是测试用的，在实际就用时可以删掉。
技巧：如果所有层都是直接在标签内的定义的，可以把 currentStyle 和runtimeStyle 改成 style。
提示：
l JavaScript 的单行注释是以一对正斜杠”//”开始，多行注释以一个正斜杠加一个星号的组合(/*)开始,并以其逆向顺序 (*/)结束。
l window.onload 表示在页面加载完成后触发。
l οnresize="init()" 表示在窗口大小改变时触发名为 init 的函数。
分析：屏幕分辨率先是影响到文档显示区域宽度(document.body.offsetWIdth)大小，然后文档显示区域宽度大小进一步影响到层的X轴定位和页面内容居中部分的相对位置，所以只要根据文档显示区域宽度大小来重新调整层的X轴坐标就行了。
特别提示
Javascript脚本的代码原则上是要求放在代码的 <head> 与 </head> 间，但放到其它标签窗口内也可以正常运行，方法二中代码运行后效果如图 3.1 和 3.2 所示：
图 3.1 窗口最大化时层的
图 3.2 窗口缩小后的层的位置
特别说明
方法一中用到了 location 对象的 replace 和 assign 方法来加载目标文档。
1. location对象的replace方法是将指定的文档替换当前文档。
2. location对象的assign方法是装入新的HTML文档。
方法二中用了 currentStyle、runtimeStyle 和 style 三个对象来捕获目标对象的样式设置。
1. currentStyle对象代表在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
2. runtimeStyle对象代表居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
3. style对象代表给定元素所有可能的内嵌样式的当前设置
附录一
让网页版面自动适应屏幕分辨率的技巧
如何让网页版面更适合浏览者呢?这里有技巧
刚做好网页的朋友们经常收到网友们的反馈，说自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率，以至于看起来版面混乱。
目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接，主要*表格来定结构，那么你就可以使用该方法。非常适用于主要*表格、文字来表达信息的简单的网页页面。
制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。
二、 固定居中
自然拉伸法的好处自不必说，可以总是充满整个屏幕，但是弱点也很明显：一来如果网页版面复杂，各图形元素之间有精确的的定位关系，一旦拉开或者压缩就会彻底变形；二来即使版面不太复杂，文字行数亦不好控制。有时候分辨率一旦变化，要么太密，要么太挤，就失去了作者设计版面的意图了。所以目前各大网站普遍采用的方法是固定居中法！
该方法的制作方法很简单。在制作最大的表格时，把表格属性的宽度像素定义为一个固定数值，并且让表格居中即可。以后制作的表格，就会限定在这个表格之内，永远都不会超出800×600分辨率的屏幕，网页的大小相当于固定死了。当浏览者使用1024×768的分辨率浏览网页时，屏幕两边就会留下白边，看起来觉得比较自然。
三、 兵分两路
如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。把这两个首页文件分别命名为index800.htm和index1024.htm 。然后在空白的索引页index.htm中加入以下代码到前面：
<Script language=”javascript”>
if (window.screen){
var w=screen.width;
url_800=”index800.htm”;
url_1024=”index1024.htm”
//请根据你的文件命名修改
if (w<835){
self.location.replace(url_800);
}//加入判断条件，还可以用“&”加入多个判断条件
if (w>=835){
self.location.replace(url_1024);
}
}
</Script>
这样，当访问者打开你的索引页时，系统就会判断访问者的屏幕分辨率，然后转到相应的首页。
附录二
网页中有两种显示方式,一种是按照百分比像素显示.用%表示的 另一种是固定的像素高度宽度.单位是:px
第一种方法可以让网页适应任何分辨率用户的浏览
table width="100%"
一楼说的有些不准确，1024的网页，你“框架”只能小于1024，一般应该是101几的样子，准确的记不清了。800，很明显，以前常用的是780宽度。
其实没有什么适应显示器的分辨率什么的，百分比只是布局实现的一种，网页的可延伸性，例如有人喜欢做全屏的网站，那么在800和1024下根本没有差别，有差别的是浏览者所看到的内容大，小，精细与否。这么说你不理解的话，大家都玩儿过CS吧？CS默认是800X600，你试试在17寸和19寸显示器上修改分辨率为1024X768，本质上没区别，越小越精细而已
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
