微信小程式橫屏字型變大的完美解決方案

2021-09-25 12:22:31 字數 747 閱讀 1612

rpx:螢幕寬度是固定的 750rpx,也就是說:5rpx == 5 / 750 * 螢幕寬度,豎屏切換成橫屏,螢幕寬度就會變大,5rpx也會隨即變大。字型也就變大了。

有人說用px解決,沒錯,的確可以,但不同尺寸,不同解析度的手機,螢幕的畫素也不一樣,這就會導致控制項的大小在不同手機上的展示會有差異。

那怎麼完美解決呢???

了解一下css3的單位 vmax,vmin

vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax

vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin

這樣來看vmax,vmin也是百分比單位,這裡我們使用vmin就能鎖定螢幕的短邊了!

只要把rpx換算成vmin就能完美解決字型變大的問題!

rpx與vmin的換算關係:

10rpx 換成 calc(10vmin * 100 / 750)

==簡單寫==>>

10rpx 換成 calc(10vmin / 7.5)

5px 換成 calc(5vmin / 3.75)

將你的 rpx 和 px 都替換按上面套就成了。

拿走請扣6666666

微信小程式 設定畫布字型

得將屬性設定寫在filltext的前面,否則不起作用 var context wx.createcanvascontext canvas context.setfontsize 10 設定字型大小 context.settextalign center 設定字型水平居中 context.settex...

微信小程式 字型水平垂直居中

利用 line height,使line height的值與view的height一致即可 wxml container 海轟wxss container效果使用flex彈性布局 wxss使用下面的 display flex justify content center align items ce...

監測和設定微信小程式橫豎屏轉換

今天在使用小程式測試橫豎屏時,發現官方給出的配置有問題 如果想要某個頁面支援螢幕旋轉,需要在此頁面的 json檔案中配置 pageorientation auto 1 然後如果手機螢幕旋轉,頁面會自動進行旋轉。我們需要根據螢幕方向顯示不同的內容,那如何判斷當前螢幕的方向呢?可以在此頁面的 js 檔案...