今天看看來研究下微信小程序沒人關注的的東西：em 和 rem
|
基本上，在微信小程序里面很多人用的都是rpx作為單位，但是小程序里面也可以用em 和 rem 作為單位，只不過他們相對于rpx來說看起來是有點麻煩了些。自己就來摸索下若果使用相對單位的時候，是個什么樣的機制。 首先 ，在寬度為320px的寬度下。先上一段
圖如下
然后，在寬度375px的寬度下，如果是上面的那個結構的話， 顯示出來的效果是這樣的，
這個時候如圖顯示
上述結果就是成立的。 上面的18.75px是怎么來的？在這里，設定一個當前字體默認數值N 寬度為w 則 寬度數值 與 字體默認數值之比為W/N 這個時候會發現，320px寬度的時候這個比值為20，把這個套用在375px寬度的時候 是18.75px 360px的寬度的時候是18px 414px的寬度的時候是20.7px 在不同的寬度下，僅僅針對根節點的文字大小的時候，這個時候1rem=1em 等于當前寬度的默認字體大小的數值規則的。 在官方手冊文檔中 可以得到rpx與px關系。那是否跟上述有關系呢，這里繼續在來看下。 因為每個寬度下不設定字體都有個默認的字體的大小。所以用rpx與px的關系來測測看。 320px寬度時 16px=37.5rpx 360px寬度時 18px=37.5rpx 375px寬度時 這里就是出現了一個問題 上面兩個寬度是整除數 到了這個寬度的時候，是18.75px，此時的px與rpx規則下18px=36rpx是成立的。也是是說18.75px=37.5rpx才對 但是，在設置37.5rpx的時候我通過調試面板來觀察，但是這個時候 去不是18.75px的字體大小而是18px。。。。 再來看看412px的寬度 這時候的字體大小20.6px=37.5rpx；轉到調試面板的時候卻發現依舊如此，小數點后面的被去掉了。但是，每個寬度下的根據規則得出的rpx的值卻是一定的。 所以從上面看出，使用rpx的的單位在不同的單位下面，他的值是一樣的，但是使用rem 或者 em的時候，此時的rpx的值跟rem/em的值還是有些出入的。 最后說下，上述的測試也許不是很嚴謹，但是，最好在編寫小程序的時候用rpx最好。這個測試看看就好，沒必要深究。 |
在圖里面我們可以看到，視圖里面的字體大小也是一樣大小的，也就是說，在這個寬度下，16px=1rem=1em。
從上面的圖看出來，在這個寬度下，上述的結果是不成立。但是，在這個寬度下，18.75px=1rem=1em.
