1px像素兼容是前端老生常谈的一个问题之一,那么为什么会出现这样的bug?我们都知道,现在的设备屏幕越来越清晰,2k屏、4k屏、苹果ios的retain屏以及现在安卓机的高清屏,使物理设备分辨率和设计稿的比例不再是1:1的对等关系(传统的pc端除外,依旧按像素切图),而是2:1、3:1,部分安卓机能达到3.5:1,那么要想让1像素(px)在不同平台显示同等粗细,这的确有一定难度。

1px像素问题最佳解决方案!-Qui-Note

这个物理设备分辨率与设计稿的px比例又被新叫了一个称呼:devicePixelRatio,要兼容1px,最佳的方案就是根据devicePixelRatio的值,改变设备1px的宽度。2倍屏,1px 改为0.5px;3倍屏 改为0.333...px。如果后面还有更高继续缩小对应px的比例。

兼容原理明白了,那实际上应该怎么做?0.3333px这样的小数单位设备能识别嘛?这就是接下来又要考虑的问题了。

我们知道css2有个缩放属性:transform: scale(x),假如把1px变成0.5,用缩放就是transform: scale(0.5),同样的3倍屏可以用transform: scale(0.3333),这同样也是解决这个兼容问题的一个办法!同时也解决了0.3333px小数单位兼容问题。

那考虑一下,还有其他方法嘛?有box-shadow 、 background-image、border-image都可以给出对应的解决方案,另外,js动态计算重新赋值也是一个方法。所以,下次再遇到这样的问题,是不是就有思路了。
1px像素问题最佳解决方案!-Qui-Note

解决方案

个人觉得当前浏览器的版本已经很高了,低版本的不是被淘汰,就是老手机,是用来很低,完全可以放弃对其兼容!从而使用最简单的办法解决此问题,那就是css兼容。

方法一:

.border{border:1px solid #f6f7f8}
.border-bottom{border-bottom:1px solid #f6f7f8}
.border-top{border-top:1px solid #f6f7f8}
.border-left{border-left:1px solid #f6f7f8}
.border-right{border-right:1px solid #f6f7f8;}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border{border:0.5px solid #f6f7f8}
.border-bottom{border-bottom:0.5px solid #f6f7f8}
.border-top{border-top:0.5px solid #f6f7f8}
.border-left{border-left:0.5px solid #f6f7f8}
.border-right{border-right:0.5px solid #f6f7f8;}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border{border:0.33333px solid #f6f7f8}
.border-bottom{border-bottom:0.33333px solid #f6f7f8}
.border-top{border-top:0.33333px solid #f6f7f8}
.border-left{border-left:0.33333px solid #f6f7f8}
.border-right{border-right:0.33333px solid #f6f7f8;}
}

方法二:

.border-line{
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
/*对比方法一,自己写吧!*/

兼容性

1px像素问题最佳解决方案!-Qui-Note

在实际开发中,能不用js就不要用,你懂的,太消耗性能了,css能解决就用css就行了!早就想总结这个问题了,一直懒没时间,终于码出来了。我是陈小知,不做无谓的代码分享。