根据页面大小变化使内容实现自适应
程序员文章站
2022-06-21 12:05:59
...
想要实现自适应需要先知道如何获取页面的高度和宽度
获取页面高度和宽度的有很多，但具体意义各不相同
例如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>