移动端网页适配的理解

概念

1.像素

即px,是屏幕显示的最小单位。它是一个相对长度单位，是会变的；

例如：在最大分辨率为1920*1080的显示器上，将分辨率调整到1920*1080，即屏幕水平方向可以显示1920个点（1920px）;

    而我们再将其分辨率修改为1366*768，即屏幕水平方向可以显示1366个点（1366px）;

   屏幕的物理宽度是不变的，那么很显然前者的1px  小于后者的 1px;

 

2.设备像素比（dpr）

网上很多写的好的，就不多赘述了。设备像素比

正因为有了dpr，所以有些时候会觉得1px的border在某些设备上看起来要‘’粗‘’些

代码

 

var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
var metaEl = document.querySelector('meta[name="viewport"]')
var rem = dpr * docEl.clientWidth / 75 * 2;
var scal = 1 / dpr;
metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scal + ',minimum-scale=' + scal + ',maximum-scale=' + scal + ',user-scalable=no');
docEl.style.fontSize = rem + 'px';
docEl.setAttribute('data-dpr', dpr);
console.log(dpr * docEl.clientWidth)
console.log('cw=' + docEl.clientWidth)
console.log('dpr=' + dpr);
console.log('rem=' + rem)
window.dpr = dpr;
window.rem = rem;
window.px2rem = function(v) {
	v = parseFloat(v);
	return v / rem
}	v = parseFloat(v);
	return v / rem
}

 

 

这个地方通过window.devicePixelRatio获取到设备的dpr，然后设置viewpoint保证比例相同。

布局采用rem为单位，通过动态设置html标签的fontsize来保证与效果图一致。至于这个地方

dpr * docEl.clientWidth / 75 * 2

除以75 * 2是为了好算，通常UI妹子给的图是以750的宽来设计的。比如效果图上div的宽度是300px，那么体现在代码中就应该是300 / 2 rem。由于浏览器有最小字体限制，所有这个地方就没有直接除以750了（除以750就直接不用算了，嘿嘿嘿）

个人理解，若有不对的地方请各大神指正