微信小程序 圖片寬高自適應詳解
更新時間：2017年05月11日 14:55:20 投稿：lqh
這篇文章主要介紹了微信小程序 圖片寬高自適應的相關(guān)資料,需要的朋友可以參考下
微信小程序 圖片寬高自適應
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% */
}
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
超越Node.js的JavaScript運行環(huán)境Bun.js功能特性詳解
這篇文章主要為大家介紹了超越Node.js的JavaScript運行環(huán)境Bun.js功能特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
這篇文章主要介紹了前端常見跨域解決方案的相關(guān)內(nèi)容，包括對跨域的解釋，常見跨域場景以及跨域解決方案，內(nèi)容豐富，需要的朋友可以參考下。2017-09-09
這篇文章主要為大家介紹了lodash里的toLength和toPairs方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS前端重新部署通知用戶刷新網(wǎng)頁示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 圖片上傳實例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
JavaScript與JQuery框架基礎(chǔ)入門教程
這篇文章主要介紹了jQuery和JavaScript入門基礎(chǔ)知識學習指南,jQuery是當下最主流人氣最高的JavaScript庫,需要的朋友可以參考下2021-07-07
Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)
這篇文章主要為大家介紹了JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
編寫微信小程序時，用到 wx.uploadFile，用來上傳圖片＋文本信息，本篇文章主要介紹了微信小程序 wx.uploadFile 的編碼坑，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了微信小程序 Button 組件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下2017-01-01