1px邊框解決方案總結

1px問題產生的緣由

從移動端的角度說個具體的場景，以iphone6爲例。

iphone6的屏幕寬度爲375px，設計師作的視覺稿通常是750px，也就是2x，這個時候設計師在視覺稿上畫了1px的邊框，因而你就寫了「border-width:1px」，so...1px邊框問題產生了。

對設計師來講它的1px是相對於750px的（物理像素），對你來講你的1px是相對於375px的（css像素）「實際上你應該是border-width:0.5px」。

具體方案

知道了問題產生的緣由，辣麼就好弄解決方案啦，O(∩_∩)O。

用小數寫邊框

媒體查詢，加小數的寫法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
複製代碼

• 優勢：方便噻
• 缺點: 安卓與低版本IOS不適用, 這個或許是將來的標準寫法

tranform加僞類標籤

利用僞類標籤，更具父級定位，大小更具媒體查詢縮放實現效果（注意別忘記了「transform-origin: left top;」）

<span class="border-1px">1像素邊框問題</span>
複製代碼

// less
.border-1px{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border:1px solid red;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止點擊觸發 */
    box-sizing: border-box;
    @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
      width: 300%;
      height: 300%;
      -webkit-transform: scale(0.33);
      transform: scale(0.33);
    }
  }
}
複製代碼

須要注意input button是沒有:before, :after僞元素的

• 優勢: 其實不止是圓角, 其餘的邊框也能夠這樣作出來
• 缺點: 代碼量也很大, 佔據了僞元素, 容易引發衝突

box-shadow

利用陰影來模擬邊框

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}
複製代碼

2倍屏

3倍屏幕

border-image

弄出1px像素邊框的實質是弄出0.5px這樣的邊框，因此咱們能夠利用相似於這樣的圖片，使得「border-image-slice」爲2，那麼實際上邊框有一半是透明的，便可獲得咱們想要的「1px邊框」

<div class="test">
    1像素邊框
</div>
複製代碼

.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}
複製代碼

• 修改顏色麻煩, 須要替換圖片
• 圓角須要特殊處理，而且邊緣會模糊

background

這方法基本不用（麻煩O(∩_∩)0），不過仍是記錄一下

.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
複製代碼

總結

從兼容性和靈活性來考慮，我的仍是推薦tranform加僞類標籤的寫法，節約時間成本。

參考資料

• 移動端1px細線解決方案總結
• 再談Retina下1px的解決方案
• 7 種方法解決移動端 Retina 屏幕 1px 邊框問題