记录移动端开发1像素边框问题, stylus代码转成less

需求:

需要解决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);
}

在手机上预览,已经发生变化:

修改前:

记录移动端开发1像素边框问题, stylus代码转成less_第1张图片

修改后:

记录移动端开发1像素边框问题, stylus代码转成less_第2张图片

问题解决,下班走人!

你可能感兴趣的:(less,stylus)