执行这个JS后,会在<html>元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3,同时会给html加上对应的font-size的值,比如说75px;
在js中设置栅格数
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {//目前主流手机最大的css像素尺寸,是540(比如devicePixelRatio为2,分辨率是1080x1920的手机),所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面,不至于因为拉伸适配后体验太差。
width = 540 * dpr;
}
var rem = width / 16;
docEl.style.fontSize = rem + \'px\';
flexible.rem = win.rem = rem;
}
页面中的元素,都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算,从而实现屏幕的适配效果
其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后,不管设备是多少的dpr,都会强制认为其dpr是你设置的值。Android系列,始终认为其dpr为1。
事实上他做了这几样事情:
动态改写<meta>标签
给<html>元素添加data-dpr属性,并且动态改写data-dpr的值
给<html>元素添加font-size属性,并且动态改写font-size的值
讨论:
字体需不需设置成px?()
原先设计图是640的,新设计图是750的。如何兼容之前的版本?