在某个夜黑风高的晚上,程序员小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无法显示之外,其他的都是好的
/* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */
// 下边框
box-shadow: 0 1px #E9E9E9;
// 全边框
box-shadow: 0 -1px #D9D9D9, 1px 0 #D9D9D9, 0 1px #D9D9D9, -1px 0 #D9D9D9;
// 其他的可以看看API更深入了解这个API
使用伪类 + transform实现
目前京东的h5网页就是使用使用伪类 + transform实现
/* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */
// 左边框,如果需要修改边框位置,可以修改元素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://juejin.im/post/684490…
https://www.kelede.win/posts/…
作者:广工小成
链接:https://segmentfault.com/a/1190000037790305
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com