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);
}
上一篇:CSS定位


下一篇:PHP EduCoder答案 PHP实现下拉菜单显示数据 下