rem布局

[info] 提示

规范只列举了rem布局这一种适配方式，但不是说限制只能用这种布局方式。 无论用何种方式，需要保证在不同比例、不同尺寸的手机上，测试微信、手Q、safari、UC等主流浏览器无明显错位、变形。

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

初始字号

css中设定html根元素的初始字体大小为100px

html{font-size:100px;}

单位转换

不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样，只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem，例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。

示例代码

用 onorientationchange 函数来检测屏幕旋转，在一些APP或游戏内嵌页面会有该函数不会执行、orientation获取不到的情况。所以如果是游戏app内嵌页建议使用 resize 事件，检查宽高变化来检测屏幕是否旋转。

<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>

注意事项

使用rem方式布局有以下几点需要注意：

• 页面用不同尺寸的手机进行测试

• 因为小于1px浏览器支持不够好为会导致计算会有误差，背景图使用雪碧图时，图标之间多留5px的空隙，同时图片的backgrornd-size属性最好写上图片的宽高，不写误差更大。　

• 雪碧图，如图片宽高为346px*160px需要设置background-size属性设置为background-size: 3.46rem 1.6rem;

• 大小为1px的元素不要使用rem，直接用px

• 多栏多列布局优先使用百分比%或是display:flex

示例猛戳 这里（请用Chrome模拟移动端方式查看）