微信小程序 圖片寬高自適應(yīng)詳解
更新時(shí)間：2017年05月11日 14:55:20 投稿：lqh
這篇文章主要介紹了微信小程序 圖片寬高自適應(yīng)的相關(guān)資料,需要的朋友可以參考下
微信小程序 圖片寬高自適應(yīng)
1.以前將小程序圖片寬度設(shè)置為屏幕寬度：
imageLoad: function () {
this.setData({
imageWidth: wx.getSystemInfoSync().windowWidth
})
}
2.現(xiàn)在：
.imgClass{
width: 100vw;
}
解析：
CSS3引入的”vw”和”vh”基于寬度/高度相對(duì)于窗口大小
”vw”=”view width”“vh”=”view height”
以上我們稱(chēng)為視窗單位允許我們更接近瀏覽器窗口來(lái)定義大小。
參照demo案例對(duì)照下面四個(gè)容器的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% */
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
微信小程序 （三）tabBar底部導(dǎo)航詳細(xì)介紹
這篇文章主要介紹了微信小程序 （三）tabBar底部導(dǎo)航詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了JavaScript?this指向綁定方式及不適用情況詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要分享JavaScript的兩張?jiān)玩湀D，我們上一篇文章介紹了JavaScript中的原型，為什么不將原型鏈一起介紹了呢？因?yàn)镴avaScript中的原型鏈?zhǔn)且粋€(gè)難點(diǎn)，也是一個(gè)面試必問(wèn)的考點(diǎn)，現(xiàn)在就來(lái)學(xué)習(xí)一下具體內(nèi)容吧2021-12-12
本文是DOM鼠標(biāo)事件的一個(gè)實(shí)際應(yīng)用。查看博客園的博客文章時(shí)，有的文章非常長(zhǎng)，卻沒(méi)有回到頂部按鈕；而且文章的點(diǎn)贊和評(píng)論都在文章最底部，使用時(shí)并不方便。所以使用自定義右鍵菜單來(lái)實(shí)現(xiàn)回到頂部、點(diǎn)贊、評(píng)論這三個(gè)主要功能,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了微信小程序 icon組件詳細(xì)及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
高級(jí)前端必會(huì)的package.json字段知識(shí)詳解
這篇文章主要為大家介紹了高級(jí)前端必會(huì)的package.json字段知識(shí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JavaScript生成器函數(shù)Generator?Functions優(yōu)缺點(diǎn)特性詳解
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator?Functions的特性及優(yōu)點(diǎn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序 瘦身技巧與方法詳解的相關(guān)資料,現(xiàn)在微信小程序 提交代碼只有1M大小的限制，這就對(duì)開(kāi)發(fā)者提出難題了，這里提供了相關(guān)方法技巧，需要的朋友可以參考下2017-01-01
JavaScript立即執(zhí)行函數(shù)用法解析
這篇文章主要介紹了JavaScript立即執(zhí)行函數(shù),我們知道，在一般情況下，函數(shù)必須先調(diào)用才能執(zhí)行，如下所示，我們定義了一個(gè)函數(shù)，并且調(diào)用,下面一起進(jìn)入文章來(lái)接具體的使用方法吧2021-12-12