解决移动端的一像素

给这个盒子一个类名 class="border-1px",给底部添加1px的边框

.border-1px{
  position:'relative';
}
.border-1px:after{
  display:'block';
  position:'absolute';
  left:0;
  bottom:0;
  width:100%;
  border-top:1px solid #ccc;
  content:' ';
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px ::after {
      -webkit-transform: scaleY(0.7);
      -moz-transform: scaleY(0.7);
      -ms-transform: scaleY(0.7);
      -o-transform: scaleY(0.7);
      transform: scaleY(0.7);
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px::after {
      -webkit-transform: scaleY(0.5);
      -moz-transform: scaleY(0.5);
      -ms-transform: scaleY(0.5);
      -o-transform: scaleY(0.5);
      transform: scaleY(0.5);
  }
}

  



posted on 2018-06-08 10:29  流星飞雨  阅读(130)  评论(0编辑  收藏  举报

导航