移动端1px问题

产生原因：

为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局，而在设备像素比大于1的屏幕上，我们写的1px实际上是被多个物理像素渲染，这就会出现1px在有些屏幕上看起来很粗的现象。

Window.devicePixeRatio = dpr = 物理像素 / 设备独立像素 

解决方案：

.h-line-bottom{
  position: relative;
  border:none;
}
.h-line-bottom:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: #C4C7D1;
  width: 100%;
  height: 1px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}


@media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2) {
  .h-line-bottom:after{
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3) {
  .h-line-bottom:after{
    -webkit-transform: scaleY(0.333);
    transform: scaleY(0.333);
  }
}