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>

猜你喜欢

转载自blog.csdn.net/qq_42192693/article/details/88660015