在某个夜黑风高的早晨，程序员小 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 会比拟粗了。
解决办法
解决办法有很多种，在这里帮大家比拟下计划：
| 计划 | 长处 | 毛病 |
|---|---|---|
| 应用 0.5px 实现 | 代码简略，应用 css 即可 | IOS 及 Android 老设施不反对 |
| 应用 border-image 实现 | 兼容目前所有机型 | 批改色彩不不便 |
| 通过 viewport + rem 实现 | 一套代码，所有页面 | 和 0.5px 一样，机型不兼容 |
| 应用伪类 + transform 实现 | 兼容所有机型 | 不反对圆角 |
| box-shadow 模仿边框实现 | 兼容所有机型 | box-shadow 不在盒子模型，须要留神预留地位 |
以上的计划在网上都能够找到示例，我这里只提供两个自己常常应用的计划：
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/…