rem 的計算公式，小程式的單位換算
阿新 • • 發佈：2018-12-23
監聽螢幕在大小改變 ,recalc 是計算方法
window.addEventListener(resizeEvt,recalc,false);計算原理是
rem 就是幫我們把設計圖實現一個等比縮放的過程，
假如設計圖是按 640px 來設計的，那麼我把設計圖分成 10份（隨你自己分），
也就是 640px = 10rem，那麼就是 1rem = 64px， 在根元素 html 上設定的 font-size 實際就是給網頁的一個標準，它的px是多少，那麼子級的 1rem 就等於多少
那麼在 640px的螢幕下，根元素 html 的font-size 就可以計算為 640/10，
但是螢幕是不指定大小的，如果螢幕縮小的，那麼根元素的值也要按百分比來縮小，如：
螢幕如果縮到了一半 320 ， （320/640）*（640/10）（螢幕寬度/設計圖） *（設計圖/設計圖的總分成）
我們公司是按蘋果5寬度 320px 的設計圖來做的，然後我把設計圖分成16份，也就是16rem，
那麼我的 1rem = 320/16 = 20px，那麼公式就是 （螢幕寬度/320） *（320/16）
然後改變 html 標籤的fontSize
html.style.fontSize = 20*(width/320)+"px";完整程式碼
(function(doc, win) { var docEl = doc.documentElement, //getElementById("luckDraw") resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; //if (!clientWidth) return; if(clientWidth<600){ var width = clientWidth; }else{ var width = 600; } docEl.style.fontSize = 20 * (width / 320) + 'px'; //寬與高度 //document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
小程式的 rem 使用
小程式中規定共有 750個物理畫素
例如：設計稿750px寬度此時1rem = （750/20）rpx = 37.5px例如：設計稿640px寬度此時1rem = （640/20）rpx = 32px
例如：設計稿320px寬度此時1rem = （320/20）rpx = 16px
小程式中rpx與px的轉換
例如：設計稿750px寬度那麼恭喜您，你ps上量出寬度是多少，那麼你就定義多少rpx，也就是 1px = 1rpx例如：設計稿640px寬度那麼很遺憾，你需要轉換一下 1px = 750/640 rpx
在 iPhone6 上，螢幕寬度為375px ，750/375 = 2rpx ，也就是說 1px = 2rpx ，剛好是整數，所以最好設計圖是以 iPhome6 為標準