【转载】Retina屏的移动设备如何实现真正1px的线？

标签：

文章转载自 酷勤网 http://www.kuqin.com/

原文链接：http://www.kuqin.com/shuoit/20150530/346322.html

原文摘要：前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？

最后找到一个还算好用的方法：伪类 + transform

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

• 单条 border

.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

.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 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector(‘ul‘).className = ‘hairlines‘;
}
可以支持圆角，唯一的一点小缺陷是<td>用不了。

【转载】Retina屏的移动设备如何实现真正1px的线？

标签：

原文地址：http://www.cnblogs.com/xiaoxianweb/p/5695510.html