商城系統(tǒng) 注冊

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

2020-09-27|HiShop
導(dǎo)讀：最新消息顯示，有一些小程序在界面沒有很好的優(yōu)化，所以界面沒有適應(yīng)屏幕高度，那么小程序怎么做自適應(yīng)屏幕高度呢？...

最新消息顯示，有一些小程序在界面沒有很好的優(yōu)化，所以界面沒有適應(yīng)屏幕高度，那么小程序怎么做自適應(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”

以上我們稱為視窗單位允許我們更接近瀏覽器窗口來定義大小。

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

參照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)屏幕高度，如果有想了解更多小程序問題，請查看本網(wǎng)站，謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店

 
電話咨詢 預(yù)約演示 0元開店