【轉載】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>