stylus 移动端边框1像素问题解决方案

借鉴前端移动框架yo

 1 border($border-width=1px, $border-color=#ccc, $border-style= solid, $radius= null) {
 2     // 为边框位置提供定位参考
 3     position: relative;
 4     if $border-width == null {
 5         $border-width: 0;
 6     }
 7     border-radius: $radius;
 8     &::after {
 9         // 用以解决边框layer遮盖内容
10         pointer-events: none;
11         position: absolute;
12         z-index: 999;
13         top: 0;
14         left: 0;
15         // fix当元素宽度出现小数时，边框可能显示不全的问题
16         // overflow: hidden;
17         content: "\0020";
18         border-color: $border-color;
19         border-style: $border-style;
20         border-width: $border-width;
21         // 适配dpr进行缩放
22         @media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49),(max-resolution: 143dpi), (max-resolution: 1.49dppx) {
23             width: 100%;
24             height: 100%;
25             if $radius != null {
26                 border-radius: $radius;
27             }
28         }
29          @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
30             width: 200%;
31             height: 200%;
32             transform(scale(.5));
33             if $radius != null {
34                 border-radius: $radius * 2;
35             }
36         }
37         @media (min--moz-device-pixel-ratio: 2.5),(-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5),(min-resolution: 240dpi),(min-resolution: 2.5dppx) {
38             width: 300%;
39             height: 300%;
40             transform(scale(.33333));
41             if $radius != null {
42                 border-radius: $radius * 3;
43             }
44         }
45          transform-origin(0 0);
46     }
47 }