HTML的dpr

只是为了自己以后查找方便，看不懂勿怪

DPI、PPI：屏幕像素密度或屏幕每英寸的像素数量

dips：手机尺寸或独立像素

物理像素 = 手机分辨率

dpr = window.devicePixelRatio（js可以拿到）

css定义

psd转换rem单位

rem = px / 基准值

基准值 = 手机宽高 * dpr / 10

乘以dpr是因为页面有可能缩放

除以10是为了取整，方便计算(可以是任何值)

以下是js设置meta的缩放和font-size

var dpr, rem, scale; 
var docEl  = document.documentElement; 
var fontEl = document.createElement('style'); 
var metaEl = document.querySelector('meta[name="viewport"]'); 
dpr = window.devicePixelRatio || 1;
scale = 1 / dpr; 
rem = docEl.clientWidth * dpr / 10; 
// 设置viewport，进行缩放，达到高清效果 
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); 
// 设置data-dpr属性，留作的css hack之用 
docEl.setAttribute('data-dpr', dpr); 
// 动态写入样式 
docEl.firstElementChild.appendChild(fontEl); 
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 
// 给js调用的，某一dpr下rem和px之间的转换函数 
window.rem2px = function(v) { 
	v = parseFloat(v); 
	return v * rem; 
}; 
window.px2rem = function(v) { 
	v = parseFloat(v); 
	return v / rem; 
};
window.dpr = dpr; 
window.rem = rem;