小程序模板網(wǎng)

今天看看來研究下微信小程序沒人關(guān)注的的東西:em 和 rem

發(fā)布時(shí)間:2018-04-16 10:15 所屬欄目:小程序開發(fā)教程

基本上,在微信小程序里面很多人用的都是rpx作為單位,但是小程序里面也可以用em 和 rem 作為單位,只不過他們相對于rpx來說看起來是有點(diǎn)麻煩了些。自己就來摸索下若果使用相對單位的時(shí)候,是個(gè)什么樣的機(jī)制。

首先 ,在寬度為320px的寬度下。先上一段

 

				
  1. <view style="font-size:16px;">這是一段文字</view>
  2. <view style="font-size:1em;">這是一段文字</view>
  3. <view style="font-size:1rem;">這是一段文字</view>
  4. <view>這是一段文字</view>

圖如下 

  在圖里面我們可以看到,視圖里面的字體大小也是一樣大小的,也就是說,在這個(gè)寬度下,16px=1rem=1em。

然后,在寬度375px的寬度下,如果是上面的那個(gè)結(jié)構(gòu)的話,  顯示出來的效果是這樣的, 

  從上面的圖看出來,在這個(gè)寬度下,上述的結(jié)果是不成立。但是,在這個(gè)寬度下,18.75px=1rem=1em.

 

				
  1. <view style="font-size:18.75px;">這是一段文字</view>
  2. <view style="font-size:1em;">這是一段文字</view>
  3. <view style="font-size:1rem;">這是一段文字</view>
  4. <view>這是一段文字</view>

這個(gè)時(shí)候如圖顯示 

上述結(jié)果就是成立的。

上面的18.75px是怎么來的?在這里,設(shè)定一個(gè)當(dāng)前字體默認(rèn)數(shù)值N 寬度為w  則 寬度數(shù)值 與 字體默認(rèn)數(shù)值之比為W/N  這個(gè)時(shí)候會發(fā)現(xiàn),320px寬度的時(shí)候這個(gè)比值為20,把這個(gè)套用在375px寬度的時(shí)候 是18.75px  360px的寬度的時(shí)候是18px  414px的寬度的時(shí)候是20.7px  在不同的寬度下,僅僅針對根節(jié)點(diǎn)的文字大小的時(shí)候,這個(gè)時(shí)候1rem=1em 等于當(dāng)前寬度的默認(rèn)字體大小的數(shù)值規(guī)則的。

在官方手冊文檔中 可以得到rpx與px關(guān)系。那是否跟上述有關(guān)系呢,這里繼續(xù)在來看下。  因?yàn)槊總€(gè)寬度下不設(shè)定字體都有個(gè)默認(rèn)的字體的大小。所以用rpx與px的關(guān)系來測測看。  320px寬度時(shí) 16px=37.5rpx  360px寬度時(shí) 18px=37.5rpx  375px寬度時(shí) 這里就是出現(xiàn)了一個(gè)問題 上面兩個(gè)寬度是整除數(shù) 到了這個(gè)寬度的時(shí)候,是18.75px,此時(shí)的px與rpx規(guī)則下18px=36rpx是成立的。也是是說18.75px=37.5rpx才對 但是,在設(shè)置37.5rpx的時(shí)候我通過調(diào)試面板來觀察,但是這個(gè)時(shí)候 去不是18.75px的字體大小而是18px。。。。  再來看看412px的寬度 這時(shí)候的字體大小20.6px=37.5rpx;轉(zhuǎn)到調(diào)試面板的時(shí)候卻發(fā)現(xiàn)依舊如此,小數(shù)點(diǎn)后面的被去掉了。但是,每個(gè)寬度下的根據(jù)規(guī)則得出的rpx的值卻是一定的。

所以從上面看出,使用rpx的的單位在不同的單位下面,他的值是一樣的,但是使用rem 或者 em的時(shí)候,此時(shí)的rpx的值跟rem/em的值還是有些出入的。

最后說下,上述的測試也許不是很嚴(yán)謹(jǐn),但是,最好在編寫小程序的時(shí)候用rpx最好。這個(gè)測試看看就好,沒必要深究。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23415.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢