欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

CSS:解决不同用户分辨率不同造成的网页布局问-知了汇智

CSS:解决不同用户分辨率不同造成的网页布局问

  方法一

  最繁琐但又是最好理解的,让不同分辨率用户访问不同的Html

  代码如下:
 

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script language="JavaScript">
		location.replace(screen.width + ".htm");//跳转到指定屏幕宽度的网页
	</script>
 
	<body>
	</body>
 
</html>


  方法二

  通过div的等比例变化实现
  代码如下:

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<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.onload = 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 onresize="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>
	</body>
 
</html>

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家web前端学习时参考

132 2811 3191
预约免费试学
点击咨询
预约试学