移动端1px问题的sass代码

Question

首先说一下，我对1px边框的理解，出现这个问题的原因是某些高清屏，一个css像素对应多个物理像素，导致设置边框为1px的时候，看起来会比较粗。例如两个尺寸一样大的屏幕，高清屏比普通屏幕1px看起来粗，但是实际尺寸一样

不知道上面的理解是否正确

不知道解决1px边框问题 可以使用scale的方法，不知道有没有即插即用的sass函数，请贴出代码（其他方法也可）

Answer 1

以1px下边框为例
定义一个border-bottom-1px的mixin，设置一个颜色参数 @color。

@mixin border-bottom-1px($color){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

对border-bottom-1px进行缩放

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.7);
             transform: scaleY(0.7);
         }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.5);
             transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.3);
             transform: scaleY(0.3);
        }
    }
}

如何使用？
html如下：

<div class="border-bottom-1px-test">这个元素有一个1px的下边框</div>

css如下：

.border-bottom-1px-test{
    @include border-1px(rgba(7, 17, 27, 0.1));
}

写css的时候记得先引入border-bottom-1px这个mixin哦。

Answer 2

没用过sass，我也基本没做过移动端。但关于1px的问题应该可以参考这个文章

《使用border-image实现类似iOS7的1px底边》https://github.com/maxzhang/m...

其它的：https://github.com/RubyLouvre...