原生页面响应式布局（rem）

注意：rem是依赖根元素的font-size

本文以版心1200px、设计图1920px为例

首先为了方便计算，推荐依据原尺寸将根元素的font-size设置为1px

行内块元素带有的间隙可能会受到影响，需要手动清除间隙：

第一步：给该行内(块)元素的父元素设置：font-size:0;

第二步：然后给子元素单独设置 font-size 即可

响应式改变 font-size 的js代码如下：

//按照宽度1920图算， 1rem = 1px;
(function(win, doc) {
   let wid = null;
    function changeFontSize() {
        wid = doc.documentElement.clientWidth;
        // 设置一个最小宽度
        if (doc.documentElement.clientWidth < 1200) {
            wid = 1200;
        }
        doc.documentElement.style.fontSize = wid / 1920 + 'px';
    }
    changeFontSize();
    win.addEventListener('resize', changeFontSize, false);

})(window, document);

将此段代码放在一个单独的js文件里，每个html文件都引入即可

注意：

此js文件需要放在 head 中引入，否则在页面载入时会出现字体大小混乱现象

此js文件需要放在 head 中引入，否则在页面载入时会出现字体大小混乱现象

此js文件需要放在 head 中引入，否则在页面载入时会出现字体大小混乱现象

 在初始化文件init.css中需设置一个最小宽度

html,
body{
    width:100%;
    min-width:1200px; // 可自行调整最小宽度
}

设置元素样式时将 px 值换成 rem 即可

例：width: 520px;  ===> width: 520rem;

这就是全部步骤了，简单又方便！！！