移动端border为1px的设置方法

一般做了前端一段时间的人都知道，在手机端使用border为1px时在retina屏中会显示2px像素，那是因为我们定义的是css的1px，而物理像素上显示则因为是一个像素代表2个像素，所以出现border为2px，解决方法有很多，我举一个最容易使用的伪元素方法吧。

使用伪元素的方式

.Bbottom:after{

    position:absolute;

    content: "";

    height:1px;

    background:#d5d5d5;

    width:100%;

    bottom:0;

    -webkit-transform:scaleY(.5);

    -ms-transform:scaleY(.5);

    -o-transform:scaleY(.5);

    transform:scaleY(.5);

}

//-webkit-transform:scaleY(.5);是为了使高度为1px缩小为0.5；

//注意伪元素使用时，记得定义父级为position:relative;

.Btop:before{

    position:absolute;

    content: "";

    height:1px;

    background:#d5d5d5;

    width:100%;

    top:0;

    -webkit-transform:scaleY(.5);

    -ms-transform:scaleY(.5);

    -o-transform:scaleY(.5);

    transform:scaleY(.5);

}

当然还会有其他的一些因素会来干扰使用方法：

注意点：

1.手机有各种类型的倍数，ios容易辨别2倍和3倍，但android的不同版本就多了--------解决方法是用media来分别判断并设置（如：@media (-webkit-device-pixel-ratio: 3){}）

2.当然原来用一个border:1px solid #000;就能解决的，非得用更多的代码去解决，必然在性能上会有一个影响；权衡得失自行考虑（考虑和设计师谈谈心）

3.更要注意的一点是请考虑兼容性问题，这个也是必须要考虑到的，主流浏览器一般没问题，但是用到了一些webview也好，其他的也好，浏览器的渲染上就是一个问题了，需要值得注意。