最近在做一个专题页时,为了兼容PC版和手机版,专题的宽度是750px,在制作时先按750px的宽度来做CSS布局制作,然后通过设置 html {font-size:100px},把100px转成1rem的方式来处理,发现在不同的手机分辨度下达不到预定效果。原来上面的设置是在一定的分辨率下设置的,而不同的手机分辨率需要做出计算才行。
解决方法添加js来控制
$(function () {
function w() {
var r = document.documentElement;
var a = r.getBoundingClientRect().width;//获取当前设备的宽度
if (a > 750 ){//根据设计稿的宽度定
a = 750;
}
rem = a / 7.5;
r.style.fontSize = rem + "px"
}
w();
//监听横竖屏切换
window.addEventListener("resize", function() { w() }, false);
});
备注:上面的代码是引用了jquery来处理,如果不引用jquery,直接引用红色的代码即可。相关链接:css在线px转rem