LESS 移动端一像素1px线条CSS解决方案

问题描述

有些手机看到的1px线条比较粗

原因分析

• 大部分手机设备像素比DPR是1，所以CSS的1px显示出的物理像素为1px
• 也有采用Retina屏幕的手机，设备像素比DPR是2或3。所以CSS里的1px映射到物理像素上时，会变成2px或3px

解决方案

• less版

// ** 1px线条
.border-1px(@position: bottom, @color: #EAEAEA, @height: 1px, @width: 100%) {
    position: relative;
    &::after {
        content: " ";
        display: block;
        position: absolute;
        @{position}: 0;
        left: 0;
        width: @width;
        height: @height;
        background-color: @color;
        transform: scaleY(0.5);
    }
}

• 使用方法

.box {
  .border-1px(bottom, #eaeaea);
}