這篇文章給大家分享的是有關(guān)移動端rem怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、為什么要用rem
博客很久沒寫了，原因很簡單。
最近接手了一個項目，要同時做PC和移動端的頁面，之前沒接觸過，但畢竟給錢的是大爺，所以還是硬著頭皮上了。
移動端最麻煩的是什么？
不同分辨率適配！
具體來說，有的屏幕320px寬，有的屏幕640px寬，有的更寬，如果你寫固定px，那么要么小的放不下，要么大的有大片空白。
怎么辦？
如果元素固定占用屏幕空間（一般是指寬度而非高度，下同）的百分之xx就ok了。
比如320px的10%是32px，640px的10%是64px，
如果10個10%寬度的元素放在一起，那肯定就是100%，即擠滿屏幕（寬度），不會超出，也不會留白。
簡單理解：
rem 就是指屏幕寬度的百分之x；
或者說，n個rem = 用戶可視區(qū)域100%寬度
注意，之所以不說高度，是因為寬度（x軸）滿了后，y軸（高度）方向的內(nèi)容可以通過滾動屏幕來查看
上實例：
1、設(shè)計師給一個640px寬度的設(shè)計圖，
2、你假定64rem=100%寬度（這里是640px），那么1rem=10px；
3、你照著寫出了靜態(tài)頁面，然后按照1rem=10px的比例，將設(shè)計圖上的元素的大小，全部用rem寫下；
4、完美，你寫的靜態(tài)頁面在640px寬度的頁面上正常展示了；
5、A用戶使用的是320px寬度的手機，因為你假設(shè)64rem=100%寬度，因此此時1rem=5px（320/64=5），于是也完美展示了；
2、rem怎么用？
rem是css單位；
1rem的大小是通過html下的font-size這個css屬性告訴瀏覽器的；
使用替換px所在的位置即可
假定你預(yù)設(shè)在設(shè)計稿的時候 1rem = 10px;
然后一個元素（class=”ele”）的寬度是20px，高度30px（設(shè)計稿），
那么你的css這么寫就可以了；
重慶分公司
重慶分公司
html {
font-size: 10px;
}
.ele {
width: 2rem;
height 3rem;
}3、在任何分辨率下都適用
發(fā)現(xiàn)問題在哪里了么？如何確認1rem等于多少px？
原因是rem是css中使用的單位，css是不會幫你計算1rem是多少px的，只能通過你自己來計算。
計算方式很簡單，簡單來說：
1、你有一個設(shè)計稿A（假定640px），有一個預(yù)設(shè)的rem和px的比例B（假如是1rem = 10px）
2、獲取用戶瀏覽器的可視區(qū)域的寬度C（假如是320px），那么他此時1rem的尺寸D 可以根據(jù) B/A = D/C 這個公式得知
3、原因是你假定屏幕可以容納多少個rem，這是一個固定比例（如這里就是64rem）
1 rem = B / A * C; //代入可得 1 rem = 10px / 640px * 320px = 5px;
4、其他
1、用戶加載完后，你就得設(shè)置好1rem的尺寸吧（記得是設(shè)置在html元素下的font-size）；
2、假如用戶屏幕的尺寸會變，你肯定得考慮吧（刷新1）；
3、你懶得去找相應(yīng)的代碼，我總得給你吧（如下）；
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//這里是假設(shè)在640px寬度設(shè)計稿的情況下，1rem = 20px；
//可以根據(jù)實際需要修改
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);直接執(zhí)行即可
感謝各位的閱讀！關(guān)于“移動端rem怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
