在某个夜黑风高的晚上,程序员小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,不如本身整理一下,也方便你们记忆设计
在讲原理以前,先跟你们说一个概念,就是设备像素比DPR(devicePixelRatio)是什么code
DPR = 设备像素 / CSS像素(某一方向上)
这句话看起来很难理解,能够结合下面这张图(1px在各个DPR上面的展现),通常咱们h5拿到的设计稿都是750px的,可是若是在DPR为2的屏幕上,手机的最小像素倒是要用2 * 2px来进行绘制,这也就致使了为何1px会比较粗了。orm
解决办法有不少种,在这里帮你们比较下方案:
方案 | 优势 | 缺点 |
---|---|---|
使用0.5px实现 | 代码简单,使用css便可 | IOS及Android老设备不支持 |
使用border-image实现 | 兼容目前全部机型 | 修改颜色不方便 |
经过 viewport + rem 实现 | 一套代码,全部页面 | 和0.5px同样,机型不兼容 |
使用伪类 + transform实现 | 兼容全部机型 | 不支持圆角 |
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
目前京东的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实现
设计师有时候很严格也是件好事