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

最新推荐文章于 2025-04-25 12:52:18 发布

小博客

最新推荐文章于 2025-04-25 12:52:18 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签：分辨率

前端专栏收录该内容

40 篇文章

订阅专栏

方法一

最繁琐但又是最好理解的，让不同分辨率用户访问不同的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>

作者：燕双嘤
来源：优快云
原文：https://blog.youkuaiyun.com/qq_42192693/article/details/88660015