小程序怎么做自適應屏幕高度
2020-09-27|HiShop
導讀：最新消息顯示，有一些小程序在界面沒有很好的優化，所以界面沒有適應屏幕高度，那么小程序怎么做自適應屏幕高度呢？...
最新消息顯示，有一些小程序在界面沒有很好的優化，所以界面沒有適應屏幕高度，那么小程序怎么做自適應屏幕高度呢？
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% */}以上是小小程序怎么做自適應屏幕高度，如果有想了解更多小程序問題，請查看本網站，謝謝。
HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店
- 關注官方公眾號 -
提供多種電商軟件及解決方案