移动端1px 的产生和解决方法

本文解析了1px线条在高分辨率设备上显示过粗的原因,涉及到物理像素、逻辑像素及设备像素比的概念。指出设计图上的1px若直接应用于CSS,将占用2个物理像素,因此显得更粗,建议使用0.5px或rem单位解决。

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

1px 在高清屏上变粗了,为啥?

 

已iphone为准;

 物理像素(设备像素):750pt,设计师设计的宽度,就是屏幕的分辨率,出厂就定了的。我们看到的是屏幕

 逻辑像素(css像素):375px;屏幕的宽度;

设备像素比(dpr): 是指在移动开发中1个css像素占用多少设备像素,如2代表1个css像素用2个设备像素来绘制。

 

 

设计图上的1px如果当成逻辑像素的话,,如果直接写border :1px 的话,那么就相当于2个物理像素,所以看起来就粗了。

其实是物理像素,用0.5px就好了,或者用rem https://blog.youkuaiyun.com/github_39319000/article/details/104968387

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值