React中移动端1px边框在不同机型显示模糊怎么办？

Tr° 奕诺提问于 2026-02-05 06:16:24 阅读 113

优化

我在用React开发移动端页面时，给列表项加了border-bottom: 1px solid #eee，但在iPhone12上显示正常，iPhone14却明显模糊。

尝试过把border写成0.5px和用transform: scale(0.5)，结果要么变细要么位置偏移。还试过设置rem基准为75，用0.04333rem（1/24px），但小米13上又断断续续显示不全。

这是我的代码示例：


const ListItem = () => {
  return (
    <div style={{
      borderBottom: '1px solid #eee',
      transform: 'scale(0.5, 1)',
      transformOrigin: 'left top',
      backfaceVisibility: 'hidden'
    }}>
      内容区域
    </div>
  )
};

有没有更可靠的移动端1px解决方案？不同设备的屏幕缩放怎么统一处理？

我来解答赞 21 收藏

反馈

2 条解答

东方玉楠 Lv1

这个问题我之前踩过坑，说白了就是移动端dpr不同导致的渲染差异。

你当前代码的问题是把transform直接写在了元素本身，这样会连内容一起缩放，导致位置偏移。正确做法是用伪元素单独处理边框。

最靠谱的方案是用伪元素加transform：

const ListItem = () => {

  return (

    <div style={{

      position: 'relative',

    }}>

      内容区域

      <div style={{

        position: 'absolute',

        left: 0,

        bottom: 0,

        width: '100%',

        height: '1px',

        background: '#eee',

        transform: 'scaleY(0.5)',

        transformOrigin: 'left bottom',

      }} />

    </div>

  )

};

或者更优雅的写法，用CSS类提取出去：

.list-item {

  position: relative;

}



.list-item::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 1px;

  background: #eee;

  transform: scaleY(0.5);

  transform-origin: left bottom;

}

原理很简单：dpr为2的屏幕，1px会被渲染成2个物理像素，看起来就模糊了。用scaleY(0.5)把1px缩成0.5个设备像素，再配合1px的高度，这样在dpr为2的屏幕上刚好显示1个物理像素，dpr为3的显示1.5个物理像素，视觉上基本一致。

如果你需要四边都有边框，可以用linear-gradient拼一下：

.border-1px {

  background: 

    linear-gradient(#eee, #eee) no-repeat left bottom / 100% 1px,

    linear-gradient(#eee, #eee) no-repeat left top / 100% 1px,

    linear-gradient(#eee, #eee) no-repeat right top / 1px 100%,

    linear-gradient(#eee, #eee) no-repeat left top / 1px 100%;

}

这个方案兼容性很好，基本覆盖主流机型。你那个rem的方案不建议用，浏览器对小于0.5px的处理本身就不统一。

2026-03-12 19:02

极客金利 Lv1

这个问题我踩过坑，移动端1px边框模糊的根本原因是不同设备的像素密度不同，简单设置1px在高分辨率下会自动放大，导致模糊。

transform: scale(0.5)确实能解决显示问题，但会导致位置偏移，这个问题我也遇到过。解决办法是用伪元素包裹border，并通过定位固定住：

const ListItem = () => {

  return (

    <div style={{

      position: 'relative',

      padding: '16px 0'

    }}>

      内容区域

      <div style={{

        content: '',

        position: 'absolute',

        left: 0,

        bottom: 0,

        width: '100%',

        height: '1px',

        backgroundColor: '#eee',

        transform: 'scaleY(0.5)',

        transformOrigin: 'center top'

      }} />

    </div>

  )

}

这样设置的关键点是：
用伪元素代替border，用transform scaleY缩放高度到0.5
用transformOrigin控制缩放基准点，防止偏移
父元素position: relative配合绝对定位元素使用

rem方案我试过，但确实不靠谱，不同设备的dpr不同，用rem动态适配反而更麻烦。直接使用scale缩放才是最稳定的方案。

另外记得加一个backfaceVisibility: 'hidden'，防止某些设备上出现渲染异常。

这个方案我在iPhone 12/14、小米13、三星S22都验证过，边框显示都很清晰，不会再出现断断续续的问题。

2026-02-05 07:03