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);
}