关于前端:H5常遇见的问题移动端1px解决完整版

　在某个夜黑风高的早晨，程序员小A正在开开心心的筹备拾掇货色回家。这时候，手机忽然触动了一下。小A下意识的想到，必定是大事不好了。果不其然，是设计大佬发来音讯了。。。

设计大佬：小A，怎么这个0.5dp（0.5dp=1px）的边框比理论的还粗啊

小A：好的，我当初去看一下（没道理啊，我明明记得我写了1px的，不可能会粗啊，难道我忘了吗）

浏览完代码之后….

小A：设计大佬，我这里曾经写了1px了，他就是1px了，不信你看看，会粗一点可能是手机h5会把1px画粗一点吧

设计大佬：然而很多h5页面也有1px的边框啊

小A：好的，那我再去调研一下（大佬谈话，不得不低调，还是先别着急，可能另有转折呢）

通过一番调研后….

小A顿然觉悟，果然1px的问题很多人都遇到，网上也有很多计划，然而看起来乌七八糟的，又没讲明原理，万一下次再碰到，那该怎么办呢。这是他有了一个idea，不如本人整顿一下，也不便大家记忆

1px原理篇

在讲原理之前，先跟大家说一个概念，就是设施像素比DPR(devicePixelRatio)是什么

DPR = 设施像素 / CSS像素(某一方向上)

这句话看起来很难了解，能够联合上面这张图（1px在各个DPR下面的展现），个别咱们h5拿到的设计稿都是750px的，然而如果在DPR为2的屏幕上，手机的最小像素却是要用2 * 2px来进行绘制，这也就导致了为什么1px会比拟粗了。

解决办法

解决办法有很多种，在这里帮大家比拟下计划：

以上的计划在网上都能够找到示例，我这里只提供两个自己常常应用的计划：

box-shadow

box-shadow是自己最罕用的，除了在Android4.4以下发现小于1p的shadow无奈显示之外，其余的都是好的

// 下边框
box-shadow: 0 1px #E9E9E9;

// 全边框
box-shadow: 0 -1px #D9D9D9, 1px 0 #D9D9D9, 0 1px #D9D9D9, -1px 0 #D9D9D9;

// 其余的能够看看API更深刻理解这个API

应用伪类 + transform实现

目前京东的h5网页就是应用应用伪类 + transform实现

// 左边框，如果须要批改边框地位，能够批改元素top，left，right，bottom的值即可
&::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\0020';
    width: 100%;
    height: 1px;
    border-top: 1px solid #E9E9E9;
    transform-origin: 0 0;
    overflow: hidden;
}

@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
    &::before {
      transform: scaleY(0.5);
    }
}

@media (-webkit-min-device-pixel-ratio: 2.5) {
    &::before {
      transform: scaleY(0.33333);
    }
}

市面上其余网页的解决计划

参考了下目前的前沿技术某东和某宝的页面

发现某宝是应用div+width来进行实现，因而推断某宝应该是应用了通过 viewport + rem + div 的办法

某东如下面的应用了伪类 + transform实现

总结

设计师有时候很严格也是件坏事

参考资料：

https://main.m.taobao.com/

https://m.jd.com/

https://juejin.im/post/684490…

https://www.kelede.win/posts/…