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

2024-04-06 18:34:38

问题描述

有些手机看到的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);
}