小程序如何做自適應屏幕高度

發布時間：2022-03-09 09:56:55 來源：億速云閱讀：2218 作者：iii 欄目：開發技術

這篇文章主要講解了“小程序如何做自適應屏幕高度”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“小程序如何做自適應屏幕高度”吧！

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% */

}

感謝各位的閱讀，以上就是“小程序如何做自適應屏幕高度”的內容了，經過本文的學習后，相信大家對小程序如何做自適應屏幕高度這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站