如何让⽹页⼤⼩⾃适应的JS代码
其原理是⽐较简单的，也就是根据当前视⼝的⼤⼩⾃动计算跟元素的fontSize值：
! function(a) {
function b() {
//为window对象添加了rem属性，其值为document.documentElement的宽度的1/16!
//同时把他设置为document.documentElement的fontSize属性，这⾥其实不⽤把window对象设置⼀个rem属性，因为a.rem只是设置了⼀次
< = f.getBoundingClientRect().width / 16, f.style.fontSize = a.rem + "px"
css简单网页代码
}
var c, d = a.navigator.appVersion.match(/iphone/gi) ? a.devicePixelRatio : 1,
//iphone⼿机要计算devicePixelRatio的值
e = 1 / d,
//dpr表⽰⼀个CSS像素对应于多少个物理像素。那么⽹页的缩放⽐例很显然就是其倒数，这样才能在不同设备上进⾏⾃适应
f = document.documentElement,
g = ateElement("meta");
//为window对象设置了dpr属性，同时为window对象设置了resize⽅法
if (a.dpr = d, a.addEventListener("resize", function() {
//在resize⽅法中如果两次resize的时间间隔⼩于300ms，这时候我们会清除上⼀次的resize事件
clearTimeout(c), c = setTimeout(b, 300)
}, !1), a.addEventListener("pageshow", function(a) {
//pageshow事件在页⾯显⽰时候触发，不论该页⾯是否来⾃bfcache，在重新加载页⾯中，pageshow会在load 事件触发后触发，⽽对于bfcache中的页⾯，pages            a.persisted && (clearTimeout(c), c = setTimeout(b, 300))
}, !1), f.setAttribute("data-dpr", d), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + e + ", maximum-scale=" + e + ", minimum-scale        //firstElementChild表⽰的就是head元素，为他指定⼀个meta标签就可以了
else {
var h = ateElement("div");
h.appendChild(g), document.write(h.innerHTML)
}
b()
}(window);
通过这段代码我们可以知道跟元素的fontSize和缩放⽐例都是通过动态计算出来的，因此可以在不同的设备上进⾏适配
具体可以参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。