Retina屏的移动设备如何实现真正1px的线?

作者: haibao 分类: 其他 发布时间: 2017-10-10 10:31
活得累是因为心里装了多余的东西,跟吃饱了撑的是一个道理。

在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Connor 讲到关于“retina hairlines”(retina 极细的线):在retina屏上仅仅显示1物理像素的边框,开发者应该如何处理呢。

搜遍整个谷歌,发现好多人早已开始研究解决方案了。有说用 0.5px 解决的,但问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和 之前版本,OS X Mavericks 及以前版本,还有 Android 设备。也有人用图片实现 border 的,还有用多背景渐变实现的,还有用 box-shadow 模拟边框的。试了下都不是很好用。

后来看了篇Alon Zhang大神写的文章,他是这样实现的:

伪类 + transform,原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transformscale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

单条 border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

四条 border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.hairlines li{
    position: relative;
    margin-bottom: 20px;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

样式使用的时候,也要结合 JS 代码,判断是否 Retina 屏:

1
2
3
if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('ul').className = 'hairlines';
}

可以支持圆角,唯一的一点小缺陷是 用不了,不过可以解决了1px的问题,还是蛮开心的!

本文地址:[Retina屏的移动设备如何实现真正1px的线?],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>