基本上,在微信小程序里面很多人用的都是rpx作為單位,但是小程序里面也可以用em 和 rem 作為單位,只不過他們相對于rpx來說看起來是有點(diǎn)麻煩了些。自己就來摸索下若果使用相對單位的時(shí)候,是個(gè)什么樣的機(jī)制。 首先 ,在寬度為320px的寬度下。先上一段
圖如下 在圖里面我們可以看到,視圖里面的字體大小也是一樣大小的,也就是說,在這個(gè)寬度下,16px=1rem=1em。 然后,在寬度375px的寬度下,如果是上面的那個(gè)結(jié)構(gòu)的話, 顯示出來的效果是這樣的, 從上面的圖看出來,在這個(gè)寬度下,上述的結(jié)果是不成立。但是,在這個(gè)寬度下,18.75px=1rem=1em.
這個(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è)測試看看就好,沒必要深究。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)