需求：
需要解决1像素问题:
物理像素是设备像素的2倍，在手机上预览，1px边框会变成2px参考cube-ui的mixin.styl 中1像素解决方案，如下：
border-1px($color = #ccc, $radius = 2PX, $style = solid) position: relative &::after content: "" pointer-events: none display: block position: absolute left: 0 top: 0 transform-origin: 0 0 border: 1PX $style $color border-radius: $radius box-sizing border-box width 100% height 100% @media (min-resolution: 2dppx) width: 200% height: 200% border-radius: $radius * 2 transform: scale(.5) @media (min-resolution: 3dppx) width: 300% height: 300% border-radius: $radius * 3 transform: scale(.333)问题：
我们的项目中所有样式文件都是用less写的，而且就用一个mixin.styl 中的这个方法而已
解决：
改成less 语法，对照less官方文档，写入 mixin.less文件，引用
除了语法的不同，变量定义、方法的调用外，改了一处
//原来： border: 1PX $style $color //改成：我只需要下边框 border-bottom: 1PX @style @color;改后代码如下：
.border-1px(@color: #ccc, @radius: 2PX, @style: solid){ position: relative; &::after { content: ""; pointer-events: none; display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; border-bottom: 1PX @style @color; border-radius: @radius; box-sizing: border-box; width: 100%; height: 100%; @media (min-resolution: 2dppx){ width: 200%; height: 200%; border-radius: @radius * 2; transform: scale(.5); } @media (min-resolution: 3dppx){ width: 300%; height: 300%; border-radius: @radius * 3; transform: scale(.333); } }}使用：
@import "../../assets/style/mixin.less";li { .border-1px(#E1E1E1);}在手机上预览，已经发生变化：
修改前:
修改后:
问题解决，下班走人！