运动网站建设主题,地产网站建设方案,wordpress数据库写文章,律师网站 扁平化问题展示 原因
rpx类似rem#xff0c;渲染后实际转换成px之后可能存在小数#xff0c;在不同的设备上多多少少会存在渲染的问题。而1rpx的问题就更加明显#xff0c;因为不足1个物理像素的话#xff0c;在IOS会进行四舍五入#xff0c;而安卓好像统一向上取整#xff0c…问题展示 原因
rpx类似rem渲染后实际转换成px之后可能存在小数在不同的设备上多多少少会存在渲染的问题。而1rpx的问题就更加明显因为不足1个物理像素的话在IOS会进行四舍五入而安卓好像统一向上取整这也是上面两种设备表现不同的原因
解决方法
我们采用的方法是采用translate:scale(0.5)的方法对边框进行缩放 .select-box{position: relative;border-width: 0rpx !important;padding: 0.5rpx;z-index: 0;
}
.select-box::after{box-sizing: border-box !important;position: absolute;border-width: 2rpx !important;left: 0;top: 0;width: 200% !important;height: 200% !important;transform-origin: 0 0;transform: scale(0.5) !important;z-index: -1;
}给.select-box的元素设置边框宽度为0给::after伪元素宽高为两倍边框设置2rpx边框其他样式继承元素的设置然后再缩放0.5来达到边框为1rpx的效果
题外话
border: 1rpx solid #ccc border-width、border-style、border-color
