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

—— 2020 ——

09/27

00:00

來源：

作者：未知

欄目：小程序開發(fā)

2020/9/27 0:00:00 來源：不詳作者：未知

最新消息顯示，有一些小程序在界面沒有很好的優(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)站，謝謝。

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

【本站聲明】
1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記，如有知識產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請立即聯(lián)系。
2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請您直接與該類商品/服務(wù)的提供者聯(lián)系。

KESION 科汛軟件
KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨立部署品牌網(wǎng)校和在線教育咨詢等。
KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動商業(yè)革新，讓商業(yè)變得更智慧！

▼點擊進(jìn)入科汛官網(wǎng)了解更多

熱門標(biāo)簽

SaaS

上/下篇

微信小程序JSON 配置,小程序的配置 page.json

我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json，我們依次來說明一下他們的用途。...

微信小程序SaaS 2020/9/27 0:00:00
鶴年堂公眾號結(jié)合小程序電商轉(zhuǎn)型新零售

最新消息，中醫(yī)藥養(yǎng)生實體門店鶴年堂近日搭建了自己的小程序商城“鶴年堂新薈城店”，未來將鶴年堂公眾號發(fā)布后的所有內(nèi)容都會推送一個小程序商城，開始轉(zhuǎn)型新零售。...

小程序電商微信小程序商城營銷工具微信小程序運營 2020/9/27 0:00:00