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

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

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

提示:
本文为移动端开发学习栏目:移动端开发学习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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值