# rem适配还原设计稿，换算

1、网易做法

 1 (function(doc, win) {
2     var docEl = doc.documentElement,
3         isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
4         dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
5         dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
6         dpr = 1,
7         scale = 1 / dpr,
8         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
9     docEl.dataset.dpr = dpr;
10     var metaEl = doc.createElement('meta');
11     metaEl.name = 'viewport';
12     metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
13     docEl.firstElementChild.appendChild(metaEl);
14     var recalc = function() {
15         var width = docEl.clientWidth;
16         if (width / dpr > 750) {
17             width = 750 * dpr;
18         }
19         // 乘以100，px : rem = 100 : 1
20         docEl.style.fontSize = 100 * (width / 750) + 'px';
21     };
22     recalc()
25 })(document, window);

body {

width: 750px;

height: 640px;

}

body {

width: 7.5rem;

height: 6.4rem;

}

1 // 乘以100，px : rem = 100 : 1
2 var recalc = function() {
3     var width = docEl.clientWidth;
4     if (width / dpr > 750) {
5         width = 750 * dpr;
6     }
7     // 乘以100，px : rem = 100 : 1
8     docEl.style.fontSize = 100 * (width / 750) + 'px';
9 };

posted @ 2019-05-18 09:27  落叶无痕~  阅读(1188)  评论(0编辑  收藏