ios 0.5px出现边框丢失的问题

最近在搞uniapp开发的时候,碰见设置元素1rpx边框线的时候 会经常出现边框线丢失的问题,但是在谷歌上并没有出现这个问题 很奇怪.

首先ui是肯定不允许这种情况出现的
其实这个也牵扯出来了一个经典的面试问题 移动端1px 显示问题

因为不同的设备设备像素比是不一样的,导致 渲染1px用的 物理像素是不同的,导致在有些设备上看起来 很粗呢 效果就不好看了,

其实网上方法也很多 这里只写一种,博主使用的。
就是使用伪类生成 同样大小的父类元素 设置1px 然后等比缩放一倍来实现

// 细边框
.b-solid {
    
    
  position: relative;
  &::after {
    
    
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $primary;
    border-radius: 4rpx;
    transform-origin: 0 0;
    transform: scale(0.5);
  }
}

方法不在于多 在于精 在于你喜欢哪个 哈哈

关注我 持续更新前端知识