根据页面大小变化使内容实现自适应

汤臣一品保安队队长

已于 2022-02-23 15:21:20 修改

阅读量1.3k

点赞数

文章标签：前端

于 2022-02-07 16:40:19 首次发布

本文链接：https://blog.csdn.net/m0_62890302/article/details/122810736

版权

想要实现自适应需要先知道如何获取页面的高度和宽度

获取页面高度和宽度的有很多，但具体意义各不相同

例如clientHeight，offsetHeight和scrollHeight

彻底搞懂clientHeight、offsetHeight、scrollHeight的区别_十八酱君-CSDN博客_clientheight与offsetheight区别

但是上述三个都与实际的页面高度有些偏差，还有一个outerHeight，获取整个窗口的宽度

Window.outerHeight - Web API 接口参考 | MDN

解决了获取窗口高度和宽度的问题再解决如何当页面再次改变时重新获取页面的高度和宽度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./vue/vue.js"></script>
	<body>
		<div id="asd">
			{{aaa}}
		</div>
		<script type="text/javascript">
		var vm = new Vue({
			el:"#asd",
			data:{
				aaa:"他的脸上没有笑容"
			},
			mounted() {
				window.onresize = ()=>{
					return(() =>{
						alert(this.aaa)
					})()
				}
			}
		})
		</script>
	</body>
</html>

只要改变页面大小就会实现弹窗事件

最后结合实现页面内容在页面中自适应

以实现图片自适应为例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./vue/vue.js"></script>
	<body onresize = "aaaaa()">
		<!-- <p id="app"></p> -->
		<div id="app">
			{{outerHeight}}
			{{outerWidth}}
		</div>
		<img src="../Photoshop/呆头飞鸟.png" id="pot" style="height: 205px;"/>
		<script type="text/javascript">
		// function aaaaa(){
		// 	var w=window.outerWidth;
		// 	var h=window.outerHeight;
		// 	var txt="窗口大小: 宽度=" + w + ", 高度=" + h;
		// 	document.getElementById("app").innerHTML=txt;
		// }
		var vm = new Vue({
			el:"#app",
			data:{
				outerHeight:"",
				outerWidth:""
			},
			mounted() {
				this.outerHeight = window.outerHeight,
				this.outerWidth = window.outerWidth
				window.onresize = () => {
					return (()=>{
						this.outerHeight = window.outerHeight,
						this.outerWidth = window.outerWidth
						var height = (window.outerHeight)*0.2
						document.getElementById("pot").style.height = height.toString()+"px"
					})();
				}
			}
		})
		</script>
		<style type="text/css"></style>
	</body>
</html>

2022/2/23修改：

按f5刷新后onresize方法不再被调用，最后换成addEventlistener方法实现

addEventlistener方法用于向指定元素添加事件句柄，相应的还有removeEventlistener释放添加的事件句柄