移动端高清、多屏适配方案——rem (2)

执行这个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的。如何兼容之前的版本?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzjysz.html