search

wangyuan0108 / fe-qa

知识和笔记，整理分享，以便提升和巩固
https://github.com/wangyuan0108/blog/issues
13 stars 0 forks source link

小程序中1px的别框在ios下变粗，解决1px细线的方法 #86

Open wangyuan0108 opened 4 years ago

wangyuan0108 commented 4 years ago

由于在小程序中我们可以使用rpx单位来做适配，但是当遇到border为1px时候就不能使用rpx作为单位了，通常要求不高的话，我们可以直接使用1px来实现，但是这时会遇到在ios先看起来变粗的问题，所以需要做兼容1px的细线

wangyuan0108 commented 4 years ago

我解决的方式是通过缩放来解决：

.middle_line {
  margin: 40rpx 40rpx 0;
  width: 630rpx;
  position: relative;
}

.middle_line:after {
  position: absolute; 
  content: '';
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}