JS实现rem适配

1.rem定义

rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。

eg：页面中设置html标签的font-size为16px时，1rem = 16px

1.  
   html{
2.  
   font-size:16px;//根元素字体大小，此时1rem = 16px
3.  
   }

2.根据不同设备宽度来动态设置html字体大小，实现rem不同设备下的适配

 eg：以电脑1920px设计宽度为例，根据实际屏幕宽度设置html根元素font-size大小，1rem就等于

rem = 屏幕宽度 / 设计稿宽度(1920px) *100

若屏幕宽度为1920px，即1rem = 100px，假如需要设置某个div标题大小为20px,宽为200px，高100px，则

1.  
   div{
2.  
   font-size:0.2rem,
3.  
   width:2rem,
4.  
   height:1rem
5.  
   }

这样在不同屏幕下，不同DOM元素的实际大小为  屏幕宽度 / 1920，实现了等比例缩放

rem适配代码实现：

1.  
   (function(designWidth, maxWidth) {
2.  
   var doc = document,
3.  
   win = window,
4.  
   docEl = doc.documentElement,
5.  
   remStyle = document.createElement("style"),
6.  
   tid;
7.  
    
8.  
   function refreshRem() {
9.  
   var width = docEl.getBoundingClientRect().width;//屏幕宽度
10.  
    maxWidth = maxWidth || 540;//设置最大宽度
11.  
    width < 800 && (width = 800);//设置最小宽度
12.  
    width > maxWidth && (width = maxWidth);
13.  
    var rem = width * 100 / designWidth;//屏幕宽度 / 设计稿宽度 * 100，若为电脑运行，此时rem=100
14.  
    remStyle.innerHTML = 'html{font-size:' rem 'px;}'//此时重新定义html根元素大小为1rem，即100px
15.  
    }
16.  
     
17.  
    if (docEl.firstElementChild) {
18.  
    docEl.firstElementChild.appendChild(remStyle);
19.  
    } else {
20.  
    var wrap = doc.createElement("div");
21.  
    wrap.appendChild(remStyle);
22.  
    doc.write(wrap.innerHTML);
23.  
    wrap = null;
24.  
    }
25.  
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
26.  
    refreshRem();
27.  
     
28.  
    win.addEventListener("resize", function() {
29.  
    clearTimeout(tid); //防止执行两次
30.  
    tid = setTimeout(refreshRem, 300);
31.  
    }, false);
32.  
     
33.  
    win.addEventListener("pageshow", function(e) {
34.  
    if (e.persisted) { // 浏览器后退的时候重新计算
35.  
    clearTimeout(tid);
36.  
    tid = setTimeout(refreshRem, 300);
37.  
    }
38.  
    }, false);
39.  
     
40.  
    if (doc.readyState === "complete") {
41.  
    doc.body.style.fontSize = "16px";
42.  
    } else {
43.  
    doc.addEventListener("DOMContentLoaded", function(e) {
44.  
    doc.body.style.fontSize = "16px";
45.  
    }, false);
46.  
    }
47.  
    })(1920, maxWidth);//此处传入设计稿宽度及最大宽度

将代码放在js文件中，在页面进行调用，或直接写在index.html页面script标签内。

这篇好文章是转载于：学新通技术网