我们设置1px边框通常设置border:1px solid #ddd，这个在pc浏览器浏览一般没问题，但在移动端浏览器浏览时，由于各种手机终端的dpr不同，1px的值也会变(ipone的dpr为2，浏览时却为2px)。这是学到一个方法去解决这个问题。

主要思路：通过给dom元素设置一个伪类，并定义其宽度，生成1px的边框。在不同的dpr设备上media查询dpr值通过scale去缩放来达到最佳效果。

以下为一简单demo

html:

<div class="demo"></div>

css:

.demo{

position:relative;

}

.demo:after {                   //定义下边框为1px

display:block;

position:absolute;

width:100%;

left:0;

bottom:0;

border: 1px solid #ddd;

content: ' '

}

@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5){

.demo:after{ -webkit-transform: scaleY(0.7); transform:scaleY(0.7)}

}

@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2){

.demo:after{ -webkit-transform: scaleY(0.5); transform:scaleY(0.5)}

}

以上就可以解决1px在各移动终端的最佳浏览效果了^_^