当前位置: 首页 » 前端开发 » Retina屏的移动设备如何实现真正1px的线?
 |  全屏浏览  |  字号调整:

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

2017-10-10 10:31:20 前端开发 1 356 百度已收录
本文最后更新于2017-10-10,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六晚上好, 本文除去代码部分,共1172个字,预计阅读时间需要3分钟。

在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的线?

本文地址:http://www.hehaibao.com/retina-1px/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

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