乐趣区

关于前端: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 会比拟粗了。

解决办法

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

计划 长处 毛病
应用 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/…

退出移动版