使用min-device-pixel-ratio媒体功能实现真正的1像素border

本文介绍了在移动端开发中,如何利用媒体查询的min-device-pixel-ratio属性来解决在不同设备像素比下,1px border显示粗细不一致的问题。通过这种方法,可以在设备像素比为2的设备上实现真正的1像素边框效果。
摘要由CSDN通过智能技术生成

过完了一个愉快的年,开始陆陆续续的继续在家学移动端开发的知识。
关于设备像素比的知识,想必做过移动端开发的都有接触,这里就不介绍啦,万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍

由于设备像素比存在的原因,我们在处理设计图的一些边框时,对于1px的border,如果在代码里将其写死,可能在不同设备像素比的设备中,粗细不一样,尤其是在目前大多数设备像素比为2的设备中,过粗。

那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现货真价实的1px border。

scss代码如下:

%border-1px{
    display: block;
    position:absolute;
    left: 0;
    width: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值