根据屏幕大小动态确定盒子大小，自适应屏幕

最新推荐文章于 2023-06-05 14:48:07 发布

凉粉Candy

最新推荐文章于 2023-06-05 14:48:07 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js小例子文章标签： js HTML

本文链接：https://blog.youkuaiyun.com/SYFCady/article/details/99294573

js小例子专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何根据屏幕尺寸动态调整盒子大小，以实现屏幕自适应效果。文中提到了屏幕对象screen的相关属性，如height和width，用于获取显示器的实际尺寸，并提供了代码示例来展示实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据屏幕大小动态确定盒子大小（自适应屏幕）

功能描述

大小自适应屏幕，效果见下图
在这里插入图片描述

知识摘记

屏幕对象 screen

屏幕对象主要包含了计算机屏幕的尺寸及颜色信息
这些信息只能读取，不可以设置
属性：
- height 返回显示器屏的高度
- width 返回显示器屏的宽度
- availHeight 返回显示器屏的宽度，除Windows任务栏之外
- availWidth 返回显示器屏的宽度，除Windows任务栏之外

元素.style.width = screen.availWidth*比例+"px";

代码展示

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#out {
			/*width: 80%;*/
			height: 200px;
			background-color: red;
			margin: 10px auto;
			padding: 10px;
		}
		.left {
			width: 500px;
			height: 100px;
			background-color: green;
			float: left;
		}
		.right {
			width: 500px;
			height: 100px;
			background-color: yellow;
			float: right;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var out = document.getElementById('out');
			out.style.width = screen.availWidth*0.8+"px";
		}
	</script>
</head>
<body>
	<div id="out">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>