Rem布局方案

1.关键词理解：

viewport:视窗;设备屏幕用来展示网页的可视化区域

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

注：initial-scale:初始化放大倍数1.0

meta标签属性值：

物理像素和网页像素

设计稿基于iphone6设计

2.如何实现自适应

1.动态改变html的font-size值，页面元素使用rem布局，html默认大小是16px

2.设置基准值为100px

3.屏幕宽度/750 * 100 = html font-size

代码示例：

var width = document.documentElement.clientWidth;

var n = width/750 *100;

document.documentElement.style.fontSize = n + 'px';

img{ width:2rem;}

/********标准写法**********/

!function (n) {
var e = n.document, t = e.documentElement, i = 750, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function () {
var n = t.clientWidth || 375;
n > 750 && (n = 750), t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);