移动端1px边框问题

255 阅读1分钟
问题的原因:
因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina
屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了
解决方法: @media(-webkit-min-device-pixel-ratio:2)是指当时显示屏最小的色倍为2倍的
@media (-webkit-min-device-pixel-ratio: 2){
  .border-bottom::after {
     border-bottom-width: 1px;
  }
  .border:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    bottom: -100%;
    left: 0;
    border: 0 solid #e1e1e1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    width: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
   }
}