溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

小程序如何做自適應(yīng)屏幕高度

發(fā)布時間：2022-03-09 09:56:55 來源：億速云 閱讀：2210 作者：iii 欄目：開發(fā)技術(shù)

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

1.以前將小程序圖片寬度設(shè)置為屏幕寬度：

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

2.現(xiàn)在：

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

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手