1px像素问题最佳解决方案！

七娃博客 2021-05-18 685人阅读

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

1px像素问题最佳解决方案！-QUI-Notes

这个物理设备分辨率与设计稿的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-Notes

解决方案

个人觉得当前浏览器的版本已经很高了，低版本的不是被淘汰，就是老手机，是用来很低，完全可以放弃对其兼容！从而使用最简单的办法解决此问题，那就是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;
}
/*对比方法一，自己写吧！*/