移動端1像素邊框解決方案

移動端css裏面寫了1px, 實際看起來比1px粗，由於css中的1px並不等於移動設備的1px，這些因爲不一樣的手機有不一樣的像素密度

在window對象中有一個devicePixelRatio屬性，他能夠反應css中的像素與設備的像素比

 //devicePixelRatio的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是
 //devicePixelRatio = 物理像素 / 獨立像素。

 

很明顯圖一要比圖二更粗，這就是所謂的1px區別

 

實現方案：

一、僞類 + transform

原理是把原先元素的 border 去掉，而後利用 :before 或者 :after 重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位

li{position: relative;}
li:after{
  position: absolute;
  bottom:0;
  left:0;
  content: '';
  width:100%;
  height:1px;
  border-top:1px solid black;
  transform: scaleY(0.5);}

 

二、viewport + rem(ios)

viewport結合rem解決像素比問題

經過設置對應viewport的rem基準值，這種方式就能夠像之前同樣輕鬆愉快的寫1px了

在devicePixelRatio = 2 時，輸出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時，輸出viewport：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

 

三、使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0.5px的效果

.box-1px {
  box-shadow: inset 0px -1px 1px -1px black;
}

 

四、background-img漸變

設置1px的漸變背景，50%有顏色，50%透明

.border {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;

}