移动端布局

rem布局

rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性;
1.计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
2.举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem
js代码：

 function resetWidth() {
            // 兼容ie浏览器 document.body.clientWidth
            var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
            console.log(baseWidth);
            // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
            document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
        }
        resetWidth();
        window.addEventListener('resize', function () {
            resetWidth();
        })

加上下面代码防止影响默认字体大小

document.body.style.fontSize = '15px';

使用flexible布局

github地址：https://github.com/amfe/lib-flexible
官方文档地址：https://github.com/amfe/article/issues/17
本文中有部分内容引至上面这个文档。
cdn地址

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>

如果你用的是其他编辑器或者IDE，就可以用CSS的处理器来处理，比如说Sass、LESS以及PostCSS这样的处理器。

  @function px2rem($px) {
    @return $px / 75 * 1rem;
}

字体不使用rem的方法

@mixin font-dpr($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

本人学识有限 文章多有不足

若有错误 请大方指出 以免误导他人