var num = 1 / window.devicePixelRatio;
var fontSize = document.documentElement.clientWidth / 10;
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
适配移动端rem单位,实际使用的时候用量取到的像素值/75即为计算后的rem值,标准为iPhone6的750的尺寸。750px的设计稿的标准宽度为10rem;
补充另一种,本质不变
!function (a, d) {
function c() {
var t = document.documentElement.clientWidth,
i = document.documentElement.clientHeight;
d.documentElement.style.fontSize = ((t / i) >= 0.75) ? t * 0.1 + "px" : t / 750 * 75 + "px"
};
var b = null;
a.addEventListener("onorientationchange" in a ? "orientationchange" : "resize", function () {
clearTimeout(b);
b = setTimeout(c, 300)
}, !1);
a.addEventListener("pageshow", function (a) {
a.persisted && (clearTimeout(b), b = setTimeout(c, 300))
}, !1);
d.addEventListener("DOMContentLoaded", c, false)
}(window, document);
本文介绍了两种实现移动端网页布局自适应的方法。一种是通过计算屏幕宽度并设置根元素字体大小来实现,使得布局能够根据不同的设备进行缩放。另一种方法则通过监听窗口的方向变化和调整来动态改变字体大小。
784

被折叠的 条评论
为什么被折叠?



