商城系統(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元開店