移动端开发学习01： viewport视口的概念02——1px问题

最新推荐文章于 2025-09-30 14:49:05 发布

原创最新推荐文章于 2025-09-30 14:49:05 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web app

移动端开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍了移动端开发中视口的概念，特别是针对1px边框在不同设备上显示过粗的问题。由于CSS不支持小数像素，当设计图中的1px边框在手机上显示时会变得较粗。为了解决这个问题，文章提供了一个解决方案，通过使用绝对定位和缩放来实现细腻的1px边框效果。示例代码展示了如何利用CSS技巧来重现1px边框。

提示：
本文为移动端开发学习栏目：移动端开发学习01： viewport视口的概念02——1px问题

移动端开发学习01： viewport视口的概念02——1px问题

# 视口的概念 ## 1px的问题

但是我们需要明白一件事：css不支持小数！

所以UI设计的设计图如果设计了1px的边框，在手机上缩小呈现时，由于css最低只支持显示1px大小，导致边框太粗的效果。

这边是我们要聊的1px的问题

举例
在这里插入图片描述
1px问题针对不是单独的1px，而是所有的奇数单位数量的像素值。

以下提供一种解决方法。

<body>
<style>
   #app{
      height: 200px;
      width: 200px;
      border: 1px solid red;
   }

   #app2{
      height: 200px;
      width: 200px;
      position: relative;
   }
   #app2:after{
      content: '';
      position: absolute;
      top:0;
      left: 0;
      height: 200%;
      width: 200%;
      border: 1px solid blue;
      transform: scale(.5);
      transform-origin: left top;
   }

</style>
<div id="app">
</div>
<div id="app2"></div>
</body>