├── remCalc.js
└── README.md


/remCalc.js:
--------------------------------------------------------------------------------
 1 | // JS 动态设定 document 的 font-size
 2 | // 以 320 的设备宽度为基准，320 下 10px 为 1rem
 3 | (function(doc, win) {
 4 |   var docEl = doc.documentElement,
 5 |     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 6 |     recalc = function() {
 7 |       var clientWidth = docEl.clientWidth;
 8 |       if (!clientWidth) {
 9 |         return;
10 |       }
11 |       docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
12 |     };
13 | 
14 |   if (!doc.addEventListener) return;
15 |   win.addEventListener(resizeEvt, recalc, false);
16 |   doc.addEventListener('DOMContentLoaded', recalc, false);
17 | })(document, window);
18 | 
19 | 
20 | // 另外一种 rem 适配方案
21 | (function() {
22 |   var dpr, rem, scale;
23 |   var docEl = document.documentElement;
24 |   var fontEl = document.createElement('style');
25 |   var metaEl = document.querySelector('meta[name="viewport"]');
26 | 
27 |   dpr = window.devicePixelRatio || 1;
28 |   rem = docEl.clientWidth * 2 / 10;
29 |   scale = 1 / dpr;
30 | 
31 | 
32 |   // 设置viewport，进行缩放，达到高清效果
33 |   metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
34 | 
35 |   // 设置data-dpr属性，留作的css hack之用
36 |   docEl.setAttribute('data-dpr', dpr);
37 | 
38 |   // 动态写入样式
39 |   docEl.firstElementChild.appendChild(fontEl);
40 |   fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
41 | 
42 |   // 给js调用的，某一dpr下rem和px之间的转换函数
43 |   window.rem2px = function(v) {
44 |     v = parseFloat(v);
45 |     return v * rem;
46 |   };
47 |   window.px2rem = function(v) {
48 |     v = parseFloat(v);
49 |     return v / rem;
50 |   };
51 | 
52 |   window.dpr = dpr;
53 |   window.rem = rem;
54 | })();
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # remCalc
 2 | 通过JS去动态计算根元素的font-size
 3 | 
 4 | ```javascript
 5 | // 以 320 的设备宽度为基准，320 下 10px 为 1rem
 6 | (function(doc, win) {
 7 |   var docEl = doc.documentElement,
 8 |     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 9 |     recalc = function() {
10 |       var clientWidth = docEl.clientWidth;
11 |       if (!clientWidth) {
12 |         return;
13 |       }
14 |       docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
15 |     };
16 | 
17 |   if (!doc.addEventListener) return;
18 |   win.addEventListener(resizeEvt, recalc, false);
19 |   doc.addEventListener('DOMContentLoaded', recalc, false);
20 | })(document, window);
21 | ```
22 | 
23 | 另外一种 rem 适配方案
24 | ```javascript
25 | (function() {
26 |   var dpr, rem, scale;
27 |   var docEl = document.documentElement;
28 |   var fontEl = document.createElement('style');
29 |   var metaEl = document.querySelector('meta[name="viewport"]');
30 | 
31 |   dpr = window.devicePixelRatio || 1;
32 |   rem = docEl.clientWidth * 2 / 10;
33 |   scale = 1 / dpr;
34 | 
35 | 
36 |   // 设置viewport，进行缩放，达到高清效果
37 |   metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
38 | 
39 |   // 设置data-dpr属性，留作的css hack之用
40 |   docEl.setAttribute('data-dpr', dpr);
41 | 
42 |   // 动态写入样式
43 |   docEl.firstElementChild.appendChild(fontEl);
44 |   fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
45 | 
46 |   // 给js调用的，某一dpr下rem和px之间的转换函数
47 |   window.rem2px = function(v) {
48 |     v = parseFloat(v);
49 |     return v * rem;
50 |   };
51 |   window.px2rem = function(v) {
52 |     v = parseFloat(v);
53 |     return v / rem;
54 |   };
55 | 
56 |   window.dpr = dpr;
57 |   window.rem = rem;
58 | })();
59 | ```
60 | 


--------------------------------------------------------------------------------