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