1px物理像素边框

很多时候，我们希望页面中有非常细的边框，但是如果小于1px，并不是所有的浏览器都能正确显示。

其实，我们可以通过各种办法把边框边度设置为1个物理像素大小，现在的手机屏幕设备像素比都是 2DPR，3DPR的，也就是1个css像素要用多个物理像素去显示，如果设置为1个物理像素大小，就会细很多。

1 伪元素 scale 配合 media

.box2 {
  float: right;
  position: relative;
  margin-top: 20px;
  padding:20px 0;
  width: 50%;
}
.box2::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #333;
}


@media only screen and (-webkit-device-pixel-ratio: 2) {
  .box2::after {
    transform:scaleY(.5);
  }
}
@media only screen and (-webkit-device-pixel-ratio: 3) {
  .box2::after {
    transform: scaleY(.33333333333);
  }
}
@media only screen and (-webkit-device-pixel-ratio: 3.5) {
  .box2::after {
    transform: scaleY(.28571429);
  }
}
@media only screen and (-webkit-device-pixel-ratio: 4) {
  .box2::after {
    transform: scaleY(.25);
  }
}

上面的方式，无法覆盖所有的设备屏幕，可以向下面这样设置查询范围

 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
   .box2::after {
     transform:scaleY(.5);
   }

}
@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 3dppx) {
  .box2::after {
    transform: scaleY(.33333333333);
  }
}

2 Flexible方案 根据 DPR 设置 initial-scale

.box2 {
  float: right;
  position: relative;
  margin-top: 20/@rem;

  width: 375/@rem;
  padding:20/@rem 0;
  border-bottom:1px solid #333;
}

(function () {
  var scale = 1 / window.devicePixelRatio;
  var meta = document.querySelector('meta[name=viewport]');
  meta.content = 'width=device-width, user-scalable=no, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ',viewport-fit:cover';


  var styleNode = document.createElement('style');
  var width = document.documentElement.clientWidth / 16;
  styleNode.innerHTML = 'html{font-size:' + width + 'px !important}';
  document.head.appendChild(styleNode);
})();

此种方式会改变完美视口

通常配合rem适配来用