> css中的1px並不等於移動設備的1px,不一樣手機有不一樣的像素密度。window對象中有一個devicePixelRatio屬性,即css中的像素 / 設備的像素比
1. 0.5pxjavascript
經過javascript檢測瀏覽器可否處理0.5px的邊框,若是能夠則給html元素添加個classcss
if (window.devicePixelRatio && devicePixelRatio >= 2) { var test = document.createElement('div'); test.style.border = '.5px solid transparent'; document.body.appendChild(test); if (test.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(test); }
樣式以下html
div { border: 1px solid #bbb; } .hairlines div { border-width: 0.5px; }
存在的問題
不兼容安卓和ios8如下設備java
2. 圖片實現borderios
能夠用gif、png或base64圖片web
.border { border-width: 1px; border-image: url(border.gif) 2 repeat; }
存在的問題
須要改顏色的時候須要從新制做圖片,很不方便瀏覽器
** 3. 淘寶M站 viewport+rem實現**
在devicePixelRatio = 2
時,輸出viewportapp
<meta name = 'viewport' content='initial-scale=0.5, maximum-scale=0.5, user-scalable=no'>
在devicePixelRatio = 3
時,輸出viewporturl
<meta name = 'viewport' content='initial-scale=0.3333333333, maximum-scale=0.333333333333, minimum-scale=0.3333333333'>
再經過設置對應viewport的rem基準值,就能夠實現1px了。spa
存在的問題
多套樣式還須要動態改變viewport,有點繁瑣
原理是把原先的border去掉,而後利用:before 或者 :after 重作border, 並transform的scale縮小一半,原先的元素相對定位,新作的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; }
.hairlines li { position: relative; margin-bottom: 20px; border: none; } .hairlines li: after { content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; box-sizing: border-box; width: 200%; height: 200%; transform: scale(0.5); transform-origin: left top; }
結合js代碼 判斷是不是Retina屏使用:
if (window.devicePixelRatio && devicePixelRatio >= 2) { document.querySelector('ul').className = 'hairlines' }