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

Kevin·Tseng

于 2021-03-29 17:11:00 发布

阅读量494

点赞数

文章标签： css android js vue css3

本文链接：https://blog.youkuaiyun.com/u010108836/article/details/115399997

版权

本文分析了在不同设备像素比（DPR）的手机上，CSS的1px线条显示效果不一致的原因，特别是Retina屏幕如何将CSS像素映射到物理像素。针对此问题，提供了一个Less版本的解决方案，通过使用transform:scaleY(0.5)来实现1px线条在高DPR屏幕上的细腻显示。示例代码展示了如何在项目中应用该方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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