网页适应不同分辨率最简单的方法
网页适应不同分辨率最简单的方法2010-04-06 16：16今天帮人做网页，
做到最后我哥验证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
-
--如何让网页自动适应显示器不同的"分辨率"?
今天遇到一个问题，客户的屏幕分辨率是1280*1024，我的屏幕分辨率为1024*768，在我的机子上的网页正常，而到客户的机器上，网页定义好的层会
错位。针对这种情况的解决办法是：让网页自动适应显示器不同的"分辨率"?解决思路：在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。
导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设
置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的
分辨率，然后让页面或排版做出相应变化。方法一：做为不同的分辨率做不同
的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页具体步骤：1.先捕获用户的分辨率。
水平分辨率：screen.width垂直分辨率：screen.height 2.再用页面跳转
的方法转到相应页。
或者：
3.完整代码。
script language="JavaScript"！--
简单网页技巧：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=load=function init(){//匹配页面中所有标签名为DIV
元素，以数组形式返回对象var
ElementsByTagName("DIV")for(var i=0；i divs.length；
i++)//遍历所有DIV标签if(isLayer(divs[i]))//判断对象是否为层，是则调
整它的X坐标
divs[i].runtimeStyle.posLeft=parseInt(divs[i].currentStyle.left)+(doc ument.body.offsetWidth-iWidth)/2 iWidth=document.body.offsetWidth//保
存当前文档显示区域的宽度}//--/script body onresize="init()"div
id=demo Layer1/div div id=demo1 Layer2/
div
注意：l必须确保所有层的标签为DIV。l程序中的demo和demo1两个层
只是测试用的，在实际就用时可以删掉。技巧：如果所有层都是直接在标签内
的定义的，可以把currentStyle和runtimeStyle改成style。提示：l JavaScript的单行注释是以一对正斜杠"//"开始，多行注释以一个正斜杠加一
个星号的组合(/*)开始，并以其逆向顺序(*/)结束。load表示在页
面加载完成后触发。l onresize="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对象代表给定元素所有可能的内嵌样式的当前设置---华丽滴分隔线---ps：上面带红字滴方法确实可以达到效果~~下面复杂滴方法暂未使用~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。