移动端1像素解决方案

1像素问题:

.scale-1px-top {
  /* border-bottom: 1px solid rgb(229, 229, 229); */
  /* box-shadow: inset 0px -1px 1px -1px #c8c7cc; */
  border:none;
  position:relative;
}
.scale-1px-top:before{
  content: '';
  position: absolute;
  display:block;
  top: 0;
  left: 0;
  width: 200%;
  height: 1px;
  border-top: 1px solid #E7E7E7;
  -webkit-transform: scale(0.5,0.5);
  transform: scale(0.5,0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.scale-1px-bottom {
  /* border-bottom: 1px solid rgb(229, 229, 229); */
  /* box-shadow: inset 0px -1px 1px -1px #c8c7cc; */
  border:none;
  position:relative;
}
.scale-1px-bottom:before{
  content: '';
  position: absolute;
  display:block;
  bottom: -1px;
  left: 0;
  width: 200%;
  height: 1px;
  border-bottom: 1px solid #ccc;
  -webkit-transform: scale(0.5,0.5);
  transform: scale(0.5,0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.borderRadius-1px {
  /* border-bottom: 1px solid rgb(229, 229, 229); */
  /* 圆角(伪类和本体类都需要加border-radius) */
  border-radius:.16rem;
  border:none;
  position:relative;
}
.borderRadius-1px:after{
  /* 圆角(伪类和本体类都需要加border-radius) */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d1d1d1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius:.16rem;
}

页面数据量大的时候可选用svg:

<svg width=100% height=1   style="position: absolute;bottom: 0;left: 0;">
 <line x1="0" y1="0" x2="1000" y2="0" style="stroke:#E5E5E5;stroke-width:1" />
</svg>

~~~一名来自前端菜鸟的整理;