最近在做一個移動端項目，涉及到1像素問題

其實質就是移動端的css裏寫1px，看起來比1px粗，這就是物理像素和邏輯像素的區別。物理像素和邏輯像素之間存在一個比例關系，在Javascript中可以用window.devicePixelRatio來獲取，也可以用媒體查詢的-webkit-min-device-pixel-ratio來獲取，具體的比例差距由設備決定

如何解決這個問題才是重點，下面集中提出解決方案：

1.媒體查詢利用設備像素比縮放，設置小數像素

css可以寫成這樣：
.border{border:1px solid #999}

    @media screen add(-webkit-min-device-pixel-radio:2) {
        .border{border 0.5px solid #999}
    }
     @media screen add(-webkit-min-device-pixel-radio:3) {
        .border{border 0.33333px solid #999}
    }//具體的邊框值按照比例計算即可
 

2.使用box-shadow模擬邊框

利用css對陰影處理的方式實現0.5px的效果
.box{
box-shadow: 0px 1px 1px -1px black;}

復習下box-shadow屬性的用法：

box-shadow: h-shadow v-shadow blur spread color inset;

3.利用viewport+rem

同時設置對應viewport的rem基準值

在devicePixelRatio=2時，輸出viewport：

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

利用js修改動態修改：

var viewport=document.querySelector("meta[name=viewport")//返回文檔中匹配指定 CSS 選擇器的一個元素。
if(window.devicePixelRatio==1){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=1,maximum-scale=1,minimum-scale=1,user-scale=no‘)
}
if(window.devicePixelRatio==2){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scale=no‘)  
}
if(window.devicePixelRatio==3){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.3333,maximum-scale=0.3333,minimum-scale=0.3333,user-scale=no‘)  
}
var element=document.documentElement
 
var fontsize=10*(element.clientWidth/320)+‘px‘;
element.style.fontSize=fontsize

4偽類+transform實現

先把原先元素的border去掉，然後利用：before或者：after重做border，並transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位

  .box{
    position: relative;
    border: none;
  }
  .box:after{
    content: ‘‘;
    position: absolute;
    bottom: 0;
    left:0
    background: #000000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
  }

移動端的1px邊框問題