开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第15天，点击查看活动详情

前言

做过移动端的同学肯定知道1px问题，在某些机型页面我们设置的1px没有显示出1px而是比1px粗，这个也是移动端面试的经典问题。下面我们来看下1px产生的原因及解决办法。

原因

1px问题产生的原因主要是devicePixelRatio，该值等于物理像素/css像素，物理像素就是设备真实显示的1px，而css像素就是我们设置的1px，也就是说css设置的1px跟机型上的1px不相等，我们在控制台可以打印一下devicePixelRatio的值。 由打印出来的值我们可以得知1px在该机型下差不多会显示成2px，显示的效果也就是比1px粗。

解决

知道了原因下面我们想办法解决，首先css中1px，在移动端显示成2px，比例1：2，最简单的我们在css样式中设置成0.5px不就可以啦，当然不是所有的机型都是1：2，所以我们将1px设置成1/devicePixelRatio即可。要想实现这种方法我们可以利用jsx语法：

   <div class='box' data='{{window.devicePixelRation}}'></div>

也可以利用css选择器进行判断来进行改变

   .box[data='2']{
     border:1px solid #000
   }

该方法非常简单，但是兼容性不太行。还有什么方法呢？我们还可以利用伪元素，设置一个宽高为目标元素两倍的伪元素，然后设置边框为1px，再将整体缩放50%，那么此时边框刚好也是0.5px，就是利用scale缩放的思路，我们需要利用定位将伪元素放置到目标元素上面再以左上角为缩放点。

   .box:after{
    position:absolute;
    width:200%;
    height:200%;
    transform:scale(0.5);
    transform-origin:left top;
    border:1px solid #000;
    top:0;
    left:0
   }

该方法兼容性好，不好的点就是设置的样式多一点。

总结

以上就是移动端1px问题产生的原因及解决方法，整体解决思路就是想方法与devicePixelRation的值比例值相对应，让移动端上面的1px正常显示成css中的1px。