关于rem 布局的理解

页面中使用的rem单位是相对于’html’这个根节点的作为参考，默认的情况下html的字体大小16x,在什么也不做处理的情况下，页面中如果使用了rem，那么这时候的1rem表示的就是1*16 = 16px; 2rem表示的就是32px的大小；在写手机端页面时封装的rem自适应js文件如下：

<script>

            //这个js里面设置rem实现自适应的布局，1rem = 100px；

            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){//如果页面的宽度大于640px,那么html的font-size:100px,页面中1rem就表示100px的大小
                            docEl.style.fontSize = '100px';
                        }else{//如果页面是小于640px，那么html字体的大小为屏幕的宽度除以设计稿的宽度再乘以100
                            //1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
                            //2 所以我们在写样式的时候必须要先已一个确定的屏幕来作为参考，这个就由我们拿到的视觉稿来定
                            //3 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的
                            //4 iPhone6的屏幕大小是375px  375*2dpr= 640px，
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);


        </script>

参考链接：https://www.jianshu.com/p/09bd0ca51ef5
https://www.jianshu.com/p/b00cd3506782