微信小程序中單位rpx和rem的使用
前言
這篇文章主要給大家講解了rpx和rem應(yīng)用于微信小程序，如果你還沒有入門，建議先從下面看起
如果看完上面幾篇文章，我們開始進(jìn)入正題吧~~
一、rem的使用
1） js中導(dǎo)入下面這段代碼
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
2） 根據(jù)設(shè)計(jì)稿寬度算出rem和px直接的轉(zhuǎn)換公式
例如：
640px的設(shè)計(jì)稿，轉(zhuǎn)換公式就是按照上面js中這句而來【docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'】，最終 1rem = 20 x 640/320 + 'px' = 40px;
3）根據(jù)設(shè)計(jì)稿按照1rem = 40px 對(duì)著各個(gè)元素進(jìn)行單位轉(zhuǎn)換
例如：
我們測量一個(gè)元素寬度是400px，那么最終css中這樣寫 width:400/40 = 10rem
正常情況下rem的使用
二、rpx的使用
1）小程序中rpx與px的轉(zhuǎn)換
例如：設(shè)計(jì)稿750px寬度
那么恭喜您，你ps上量出寬度是多少，那么你就定義多少rpx，也就是 1px = 1rpx
例如：設(shè)計(jì)稿640px寬度
那么很遺憾，你需要轉(zhuǎn)換一下 1px = 750/640 rpx
小程序中rpx和px的轉(zhuǎn)換
2）小程序中如何繼續(xù)使用rem
例如：設(shè)計(jì)稿750px寬度
此時(shí)1rem = （750/20）rpx = 37.5px
例如：設(shè)計(jì)稿640px寬度
此時(shí)1rem = （750/20）rpx = 32px
小程序中rem的使用
注意：無論設(shè)計(jì)稿多少，rem與rpx換算總是一樣的，但是rem與px在小程序中換算是 rem = 設(shè)計(jì)稿寬/20，這一點(diǎn)與我們平時(shí)使用的rem完全不一樣。
總結(jié)
小程序畢竟出來不久，以上言論有的屬于官方文檔，有的屬于自己瞎捉摸，大家不能全信，要自己測了才知道。以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
這篇文章主要介紹了微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例，實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼，帶60秒倒計(jì)時(shí)功能，無需服務(wù)器端，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
本篇文章主要給大家詳細(xì)分析了javascript常用工具類的封裝相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考下吧。2018-01-01
js 自制滾動(dòng)條的小例子，需要的朋友可以參考一下2013-03-03
javascript 傳統(tǒng)事件模型構(gòu)造的事件監(jiān)聽器實(shí)現(xiàn)代碼
最近做東西需要添加大量的事件，而且要對(duì)所有事件進(jìn)行比較細(xì)致的控制，于是便試著寫了個(gè)事件監(jiān)聽器。2010-05-05
這篇文章主要介紹了JavaScript中詭異的delete操作符,本文講解了刪除對(duì)象的屬性、對(duì)數(shù)組的操作、對(duì)于變量的操作等內(nèi)容,需要的朋友可以參考下2015-03-03
準(zhǔn)確獲得頁面、窗口高度及寬度的JS...2006-11-11
JS實(shí)現(xiàn)數(shù)組扁平化的8種方式總結(jié)
數(shù)組扁平化指的是將一個(gè)多層嵌套的數(shù)組，處理成只有一層的數(shù)組，本文為大家整理了8個(gè)常用的JS實(shí)現(xiàn)數(shù)組扁平化的方法，希望對(duì)大家有所幫助2023-08-08
這篇文章主要介紹了js獲取元素外鏈樣式的方法,分別在標(biāo)準(zhǔn)瀏覽器與IE瀏覽器兩種情況下實(shí)現(xiàn)獲取對(duì)應(yīng)樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
WebGL 透明處理方式之一是使用 α 混合，這篇文章主要介紹了JavaScript?WebGL?圖片透明處理方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01