移動端1px解決方案

標籤：html   class   方法   shu   http   cal   width   osi   style   

前端的同學想必都碰到過1px邊框的問題，在高分屏手機上，我們會發現自己寫的1px往往會比預想的“粗”一些，下面是他人總結的解決方案。

單線

寫一個高度為1px的線，然後通過transform:scaleY(0.5)縮放來實現

1 div{2     height:1px;3     background:#ddd;4     -webkit-transform: scaleY(0.5);5     -webkit-transform-origin:0 0;6     overflow: hidden;7 }

邊框+圓角

和上面的思路是一樣的，也是通過放大後再縮小實現的，需要注意的是寬高以及圓角要設定為原來的2倍

 1 div{ 2     position: relative; 3 } 4 div:before{ 5     content: ""; 6     position: absolute; 7     top: 0; 8     left: 0; 9     width: 200%;/* 寬高要放大 */10     height: 200%;11     border: solid 1px #ddd;12     border-radius: 10px;/* 圓角要放大 */13     overflow: hidden;14     transform-origin: 0 0;15     -webkit-transform-origin: 0 0;16     transform: scale(0.5, 0.5);17     -webkit-transform: scale(0.5, 0.5);18 }

來源地址：

1px解決方案

參考連結：http://www.cnblogs.com/shuiyi/p/5568348.html

移動端1px解決方案