移动端的1px边框问题

最近在做一个移动端项目，涉及到1像素问题

其实质就是移动端的css里写1px，看起来比1px粗，这就是物理像素和逻辑像素的区别。物理像素和逻辑像素之间存在一个比例关系，在Javascript中可以用window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，具体的比例差距由设备决定

如何解决这个问题才是重点，下面集中提出解决方案：

1.媒体查询利用设备像素比缩放，设置小数像素

css可以写成这样：
.border{border:1px solid #999}

    @media screen add(-webkit-min-device-pixel-radio:2) {
        .border{border 0.5px solid #999}
    }
     @media screen add(-webkit-min-device-pixel-radio:3) {
        .border{border 0.33333px solid #999}
    }//具体的边框值按照比例计算即可

2.使用box-shadow模拟边框

利用css对阴影处理的方式实现0.5px的效果
.box{
box-shadow: 0px 1px 1px -1px black;}

复习下box-shadow属性的用法：

box-shadow: h-shadow v-shadow blur spread color inset;

4伪类+transform实现

先把原先元素的border去掉，然后利用：before或者：after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位

  .box{
    position: relative;
    border: none;
  }
  .box:after{
    content: ‘‘;
    position: absolute;
    bottom: 0;
    left:0
    background: #000000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
  }