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

版权声明:本文为qjb2404原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/qjb2404/p/12192886.html