amfe / article

7.59k stars 1.07k forks source link

移动APP页面,0.013333rem暨1px边框安卓部分机不可见 #58

Closed GF-LiuQi closed 6 years ago

GF-LiuQi commented 7 years ago

在安卓机中微信浏览器可以显示出边框,但是嵌入到APP时候,所有0.013333rem的边框都消失了!请问大神,这是为什么?

wujunchuan commented 7 years ago

我也遇到的相同的问题

YunyChan commented 7 years ago

1px不要用rem作为单位,直接写"1px"

qingmingsang commented 6 years ago

安卓机型许多都不识别带小数的px,rem是否也有这个问题?

rccoder commented 6 years ago

1px 边框建议:

.J_HAD_COUPON {
    color: #A5A5A5;
    &::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-style: solid;
      border-width: 1px;
      border-color: #CCCCCC;
      pointer-events:none;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      border-radius: 40px;
      -webkit-border-radius: 40px;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
      &::after{
        width: 200%;
        height: 200%;
        -webkit-transform: scale(.5);
        transform: scale(.5);
      }
    }
    @media (-webkit-device-pixel-ratio: 1.5) {
      &::after {
        width: 150%;
        height: 150%;
        -webkit-transform: scale(.6666);
        transform: scale(.6666);
      }
    }
    @media (-webkit-device-pixel-ratio: 3) {
      &::after {
        width: 300%;
        height: 300%;
        -webkit-transform: scale(.3333);
        transform: scale(.3333);
      }
    }
  }

可以封装成相关的 sass、less 方法