H5常碰见的问题———移动端1px解决(完整版)

 在某个夜黑风高的晚上,程序员小A正在开开心心的准备收拾东西回家。这时候,手机忽然震动了一下。小A下意识的想到,确定是大事很差了。果不其然,是设计大佬发来消息了。。。

设计大佬:小A,怎么这个0.5dp(0.5dp=1px)的边框比实际的还粗啊css

小A:好的,我如今去看一下(没道理啊,我明明记得我写了1px的,不可能会粗啊,难道我忘了吗)程序员

阅读完代码以后....web

小A:设计大佬,我这里已经写了1px了,他就是1px了,不信你看看,会粗一点多是手机h5会把1px画粗一点吧ide

设计大佬:可是不少h5页面也有1px的边框啊post

小A:好的,那我再去调研一下(大佬说话,不得不低调,仍是先别着急,可能另有起色呢)idea

通过一番调研后....spa

小A顿然醒悟,果真1px的问题不少人都遇到,网上也有不少方案,可是看起来乱七八糟的,又没讲明原理,万一下次再碰到,那该怎么办呢。这是他有了一个idea,不如本身整理一下,也方便你们记忆设计

1px原理篇

在讲原理以前,先跟你们说一个概念,就是设备像素比DPR(devicePixelRatio)是什么code

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

这句话看起来很难理解,能够结合下面这张图(1px在各个DPR上面的展现),通常咱们h5拿到的设计稿都是750px的,可是若是在DPR为2的屏幕上,手机的最小像素倒是要用2 * 2px来进行绘制,这也就致使了为何1px会比较粗了。orm

image

解决方法

解决办法有不少种,在这里帮你们比较下方案:

方案 优势 缺点
使用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 的方法

image

某东如上面的使用了伪类 + transform实现

image

总结

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

参考资料:

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

https://m.jd.com/

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

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

相关文章
相关标签/搜索