什么是 1px 问题，在移动端设备上，对于一些 retina（一种显示标准，是把更多的像素点压缩在一块屏幕里） 机型，设置 1px 后，显示的效果不像 1px 的效果，会更粗。

    原因就是 css 设置的 1px 不等于移动端设备上的1px 物理像素。
    其中有一个公式：

    1. window.devicePixelRatio = 设备像素 / css 像素

    PS：iPhone 6 7 8 的设备像素比都是 2

    解决方案

    1. 先获取设备的像素比 ，赋值给目标元素的属性，使用 css 控制，设置它的高度或者border 为 0.5px
    2. 使用伪元素，先放大在缩小。给目标元素加一个伪元素 :after，定位这个伪元素使得它铺在目标元素上，给他的 width 和 height 都放大为原来的 2倍，border 不变，使用 transform: scale( 0.5 ) 缩放。
      1. #container[data-device="2"] {
      2.  position: relative;
      3. }
      4. #container[data-device="2"]::after{
      5.    position:absolute;
      6.    top: 0;
      7.    left: 0;
      8.    width: 200%;
      9.    height: 200%;
      10.    content:"";
      11.    transform: scale(0.5);
      12.    transform-origin: left top;
      13.    box-sizing: border-box;
      14.    border: 1px solid #333;
      15.  }
      16. }