设备的dpr_移动端自适应处理--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屏幕下高清图片的显示问题，一般设置即可：