rem

Posted 2020-10-11 灬安

移动端rem必备

不会讲什么屏幕像素等等知识，网上太多了。

推荐这个下面这个。

devicePixelRatio简单介绍:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

 

然后再分享两段rem代码。

以iphone6为准，dpr（devicePixelRatio）是2，手机宽度是375px。  

设计稿的宽度是750。   所以1rem等于40px。

下面分享代码

代码1：

 1 ;(function (doc, win) {
 2     var docEl = doc.documentElement,
 3         resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
 4         recalc = function () {
 5             console.log(doc);
 6             var clientWidth = docEl.clientWidth;
 7             console.log(clientWidth);
 8             // if(typeof(clientWidth)==‘number‘ && clientWidth < 750){  //手机端自适应,   基础20
 9             if(typeof(clientWidth)==‘number‘ && clientWidth < 750 && clientWidth>319){  //手机端自适应,   基础20
10                 docEl.style.fontSize = 20 * (clientWidth / 375) + ‘px‘;
11             }else if(typeof(clientWidth)==‘number‘ && clientWidth>750){   //pc端基础为40/2  20 手机端的适配
12                 docEl.style.fontSize = ‘40‘+‘px‘;
13             }
14         };
15 
16     if (!doc.addEventListener) return;
17     win.addEventListener(resizeEvt, recalc, false);
18     doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
19     recalc();
20 })(document, window);
21 
22 
23 /*
24  *
25  * 以750为准。
26  * 当宽度大于等于750时
27  * 1rem =40px
28  * */

View Code

代码2：

 1 ;(function(win) {
 2     var remCalc = {};
 3     var docEl = win.document.documentElement,
 4         tid;
 5 
 6     function refreshRem() {
 7         // 获取当前窗口的宽度
 8         var width = docEl.getBoundingClientRect().width;
 9         // 大于640px 按640算
10         if (width > 750) { width = 750 }
11         // 把窗口的宽度固定分为10份 也就是10rem
12         // 按视觉稿640算  640/10=64px  那么1rem = 64px
13         // 640视觉中 80px*80px的按钮 转换为rem  80/64 = 1.25rem
14         // 按钮的宽高固定为  1.25rem * 1.25rem
15         // 当窗口宽度缩放为 320px的时候
16         // 那么 1rem = 32px
17         // 原来 80px*80px的按钮现在变为 1.25rem * 32px = 40px
18         // 按钮变为 40px * 40px
19         // 其他宽度也类似
20         //
21         // cms做法也类似
22         // 只是我们把窗口宽度固定分为 6.4份，即6.4rem
23         // 所以 1rem = 100px
24         // 640视觉中 80px*80px的按钮 转换为rem  80/100 = 0.8rem
25         // ....其他也差不多
26         //
27         //
28         // 对比
29         // 其实也就是计算rem的问题 视觉稿量出来的值  除64 或 100的问题
30         // 除100 总比 除64 好口算
31         // 就算用sass写个 @function px2rem代替口算
32         // .8rem 总比输入 px2rem(80)少几个字符
33         //
34         //
35         var rem = width / 18.75;  // cms 只要把这行改成  var rem = width /640 * 100
36         docEl.style.fontSize = rem + "px";
37         remCalc.rem = rem;
38         //误差、兼容性处理
39         var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
40         if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
41             var remScaled = rem * rem / actualSize;
42             docEl.style.fontSize = remScaled + "px"
43         }
44     }
45 
46     //函数节流，避免频繁更新
47     function dbcRefresh() {
48         clearTimeout(tid);
49         tid = setTimeout(refreshRem, 100)
50     }
51 
52     //窗口更新动态改变font-size
53     win.addEventListener("resize", function() { dbcRefresh() }, false);
54 
55     //页面显示的时候再计算一次   难道切换窗口之后再切换来窗口大小会变?....
56     win.addEventListener("pageshow", function(e) {
57         if (e.persisted) { dbcRefresh() }
58     }, false);
59     refreshRem();
60     remCalc.refreshRem = refreshRem;
61     remCalc.rem2px = function(d) {
62         var val = parseFloat(d) * this.rem;
63         if (typeof d === "string" && d.match(/rem$/)) { val += "px" }
64         return val
65     };
66     remCalc.px2rem = function(d) {
67         var val = parseFloat(d) / this.rem;
68         if (typeof d === "string" && d.match(/px$/)) { val += "rem" }
69         return val
70     };
71     win.remCalc = remCalc
72 })(window);
73 
74 
75 /*
76 *
77 * 以750为准。
78 * 当宽度大于等于750时
79 * 1rem =40px
80 * */

View Code