为什么1px边框在手机上看起来这么粗？

♫乐佳提问于 2026-03-20 20:03:19 阅读 7

移动

我用Vue写了个列表，每个item底部加了1px的border，但在手机上看特别粗，跟设计稿完全对不上。明明写了1px，怎么物理像素就翻倍了？

试过用transform: scaleY(0.5)来压线，但不同机型效果还不一样，有的又太细看不到了。有没有靠谱的统一方案啊？

<template>
  <div class="item">内容</div>
</template>

<style scoped>
.item {
  border-bottom: 1px solid #eee;
}
</style>

我来解答赞 1 收藏

反馈

1 条解答

UX-艺诺 Lv1

这个问题挺常见的，涉及到移动端设备的高分辨率屏幕，也就是大家常说的Retina屏。实际上，你写的1px，在某些高DPI的设备上会被渲染成2px甚至更多，这就是为啥看起来特别粗的原因。

解决这个问题的方法有几个，最常用的就是使用viewport标签配合CSS的device-pixel-ratio媒体查询来处理。不过现在更推荐的做法是使用transform结合scale来实现，因为你提到过这种方法，我们来优化一下。

首先，确保你的HTML文件里有正确的viewport设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后，你可以使用transform来调整边框的显示效果，同时保持在不同设备上的一致性。这里有一个常用的技巧，就是通过伪元素来创建1物理像素的边框：

<template>

  <div class="item">内容</div>

</template>



<style scoped>

.item {

  position: relative;

}



.item::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 1px;

  background-color: #eee;

  transform: scaleY(0.5);

  transform-origin: 0 0;

}

</style>

这样做的好处是，通过transform缩放，可以更好地控制边框在高DPI屏幕上的显示效果。注意transform-origin设置为0 0是为了确保缩放从元素的左下角开始，避免位置偏移。

希望这个方法能帮到你，解决这个问题通常需要一些试错，祝你好运！

2026-03-20 20:05