移动端rem适配

使用%单位

css中body元素全局声明font-size=62.5%,   因为浏览器中默认字体高都是16px，

所以100%=16px, 62.5%=10px,

so 1rem = 10px, 2rem = 20px.

 

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}

可以改变html的字体大小，使其他字体具有响应式。

 

(function(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
 
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
 
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    refreshRem();
 
    win.addEventListener("resize", function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
 
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
 
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

1）用法很简单，只需要在html文件head最上面加入视口代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2）然后新建一个js文件夹，将我们的佛祖和动态计算html字体大小的js代码放进去，然后在视口下面引入，就可以了，

3)使用过程中，这段js代码有两个参数可以传入，这两个参数就是你的设计师给你的设计稿宽度，填上就可以了，

4)使用很简单，设计稿宽度除以100使用即可（例如：设计稿宽度300px = 3rem，采用的是除100来换算，从而使在使用过程中更方便，无需使用rem单位换算工具）

5)rem不仅仅可以用在移动端布局，还可以用在PC端上，

例如：设计师给了你内容宽度1200px以上的设计搞要你做自适应时，你完全可以不用担心，只需要量一下设计稿宽度，修改我们js的两个参数修改为设计稿内容宽度即可。（提个醒，记得加上视口）

6)这段js主要是动态修改hrml字体大小，从而做到rem单位不动的情况下，自动适应所有手机端屏幕大小，想一下1rem在不同宽度手机上的值都是不一样的，是不是很完美呢。

 

7)此方法内有一段代码是可以修改的，修改为屏幕高度会有意想不到的效果

var width = docEl.getBoundingClientRect().width;//这段代码可修改