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);