react 移动端 1像素线的使用

　　

//1像素线文件

@mixin border($color,$width) {
& {
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;

border-style: solid;
border-color: $color;
border-width: $width;
transform-origin: 0 0;
// padding: 1px;
box-sizing: border-box;
pointer-events: none;
}
&:last-child:before {
// border-top:none;
}
}
@media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
&:before {
width: 100%;
height: 100%;
transform: scale(1);
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
&:before {
width: 200%;
height: 200%;
transform: scale(0.5);
}
}
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
&:before {
width: 300%;
height: 300%;
transform: scale(0.333);
}
}
}

 引用：

@import '~assets/stylesheet/border.scss';
@include border( #ccc, 1px 0 0 0 );