导航：首页 > 开发技术 >

小程序如何做自适应屏幕高度

发表于：2024-11-12 作者：千家信息网编辑

千家信息网最后更新 2024年11月12日，这篇文章主要讲解了"小程序如何做自适应屏幕高度"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"小程序如何做自适应屏幕高度"吧！1.以前将小程序图片宽度设

千家信息网最后更新 2024年11月12日小程序如何做自适应屏幕高度

这篇文章主要讲解了"小程序如何做自适应屏幕高度"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"小程序如何做自适应屏幕高度"吧！

1.以前将小程序图片宽度设置为屏幕宽度：

imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) }

2.现在：

.imgClass{ width: 100vw; }

解析：

CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小

"vw"="view width""vh"="view height"

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。

参照demo案例对照下面四个容器的css样式:

.demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%，字体大小为窗口的10% */} .demo1 { width: 80vw; font-size: 8vw; /* 宽度为窗口80%，字体大小为窗口的8% */} .demo2 { width: 50vw; font-size: 5vw; /* 宽度为窗口50%，字体大小为窗口的5% */} .demo3 { width: 10vw; height: 50vh; /* 宽度为窗口10%，容器高度为窗口的50% */}

感谢各位的阅读，以上就是"小程序如何做自适应屏幕高度"的内容了，经过本文的学习后，相信大家对小程序如何做自适应屏幕高度这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

很赞哦！