根据dpr设置html fontsize,移动端自适应处理-dpr

可伸缩布局方案---这个只是手淘的一个插件移动端高清多屏适配方案---主要参考的是这个

概念阐述：

1.物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示物理单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值。

2.设备独立像素(density-independent pixel)设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如：css像素)，然后由相关系统转换为物理像素。

3.设备像素比(device pixel ratio)设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系设备像素比＝物理像素／设备独立像素 (在x方向或者y方向)

要解决的问题：

1.retina和非retina手机图片显示问题问题：普通屏幕下的图片显示在retina屏幕中可能会导致图片模糊。解决：是在不同的dpr下，加载不同尺寸的图片。

2.border根据设计师的要求为retina下的border物理像素1px，此时的css像素应为0.5px,例如iphone5s;

此时因为页面scale缩小0.5,屏幕的适配布局问题可以使用rem用如下方式解决:

针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)

1 rem=document.documentElement.clientWidth*dpr/10;别人写的代码范例:

var dpr,rem,scale;var docEl=document.documentElement;var fontEl=document.createElement('style');var metaEl=document.querySelector("meta[name='viewport']");dpr=window.devicePixelRatio||1;rem=docEl.clientWidth*dpr/10;scale=1/dpr;//设置viewport,进行缩放，达到高清效果metaEl.setAttribute('content','width='+dpr*docEl.clientWidth+',initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');//设置data-dpi属性，留作的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;}此时，字体也需要相应的进行处理(注意字体不要用rem，误差会比较大)，此处写了一个@mixin进行处理

//定义一个mixin 根据不同dpr将px值转化成相应的dpr的px值。/* @params $name 是css属性 比如width,top,font-size等 @params $px 像素值*/@mixin px2px($name,$px){ #{$name}:round($px/2)*1px; [data-dpr='2']&{ #{$name}:$px*1px; } // for mx3 [data-dpr="2.5"] & { #{$name}: round($px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { #{$name}: round($px * 2.75 / 2) * 1px; } [data-dpr="3"] & { #{$name}: round($px / 2 * 3) * 1px } // for 三星note4 [data-dpr="4"] & { #{$name}: $px * 2px; }}总结:一般都不会用到处理css border-width:0.5px;的问题，所以为认为目前dpr需要处理的问题是retina屏幕下高清图片的显示问题，一般设置即可：

举报/反馈