前言

最近在做移动端的项目，在调节1px分割线的时候总是会变粗，自己也在网上搜了一些文章，进行了简单的总结，下面分享一下。

产生原因

参考：张鑫旭:https://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/
大漠:http://www.w3cplus.com/css/towards-retina-web.html
简单总结原因是设备的分辨率不同。因为Retine屏的出现，分辨率变为普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px，所以在普通分辨率高清屏下看着1px总是感觉变胖了。

解决方案

1. 建立媒体查询适配

  div{
       border:1px solid #000;
  }    

@media (-webkit-min-device-pixel-ratio: 2) {
  div{
      border:0.5px solid #000;
    }
  }

2. CSS3 伪类+transform: scale(0.5)、

.radius-border{
    position: relative;
    }
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
    content: "";
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-radius: 8px;
    border:1px solid #000；
    -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
    transform(scale(0.5));
    transform-origin: 0 0;
  }
}

比较常用方法，但是代码冗长。

3.CSS3 background渐变

@media screen and (-webkit-min-device-pixel-ratio: 2){
.ui-border-t {
    background-position: left top;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),
    color-stop(0.5,#e0e0e0),to(#e0e0e0));
}
}

小结

个人还是比较推荐使用CSS3scale,主要是兼容比较全，其他方法也可以尝试