不用再去找rem了，你想要的rem都在这

一、兼容性。

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem（大胆用吧，目前几乎所有手机浏览器都支持rem）

二、什么是rem。

rem是相对于根元素html字体大小来计算的，即( 1rem = html字体大小 )

三、使用rem布局有什么优点。

优点可大啦，他的强大可以让你不在考虑不同尺寸屏幕的手机，和制作PC端一样的写法，只需要设置好参数，就可以为所欲为了。

四、你可能会疑惑，但只要你看了这段JS后你会明白的，看不懂的小伙伴们，看了第五点的介绍你就会明白了。

不多说，上代码

//                            _ooOoo_
//                           o8888888o
//                           88" . "88
//                           (| -_- |)
//                            O\ = /O
//                        ____/`---'\____
//                      .   ' \\| |// `.
//                       / \\||| : |||// \
//                     / _||||| -:- |||||- \
//                       | | \\\ - /// | |
//                     | \_| ''\---/'' | |
//                      \ .-\__ `-` ___/-. /
//                   ___`. .' /--.--\ `. . __
//                ."" '< `.___\_<|>_/___.' >'"".
//               | | : `- \`.;`\ _ /`;.`/ - ` : | |
//                 \ \ `-. \_ __\ /__ _/ .-` / /
//         ======`-.____`-.___\_____/___.-`____.-'======
//                            `=---='
//
//         .............................................
//                  佛祖镇楼                  BUG辟易
//             佛曰:
//                  写字楼里写字间，写字间里程序员；
//                  程序人员写程序，又拿程序换酒钱。
//                  酒醒只在网上坐，酒醉还来网下眠；
//                  酒醉酒醒日复日，网上网下年复年。
//                  但愿老死电脑间，不愿鞠躬老板前；
//                  奔驰宝马贵者趣，公交自行程序员。
//                  别人笑我忒疯癫，我笑自己命太贱；
//                  不见满街漂亮妹，哪个归得程序员？
//                  
(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);

五、给大家介绍下如何使用上面这段js和这段代码的意义。

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

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

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

4)使用很简单，设计稿宽度除以100使用即可（例如：设计稿宽度300px = 3rem）

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

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

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

7)此方法内有一段代码是可以修改的，修改为屏幕高度会有意想不到的效果，大家可以自我思考一下。

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

六、在用rem的时候可能会遇到点小坑，下面小编给大家列出来几个经典的。

1)border:0.01rem solid #ccc; 边框的0.01rem在手机上会看不见，所以边框的0.01rem建议使用1px替代。

2)background-size使用rem无效，建议：修改背景图大小不要卡死，使用百分比去控制，比如background-size: 100% auto;等

在你看完这篇文章之后，恭喜你，可以去为所欲为了，提示别忘记copy我们的佛祖和rem哦，嘿嘿嘿嘿

（码字不易，如果此文章对您有帮助，有祝您为所欲为，嘿嘿嘿嘿....嘿嘿嘿嘿.... 你懂的）

不用再去找rem了，你想要的rem都在这

猜你喜欢