這一節就主要說說如何實現移動端1px的實現。

為什麼要說這個，就要要說到devicePixelRatio這個東西了。 window.devicePixelRatio是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理畫素 / dips

• 物理畫素，比較好理解，一個物理畫素是顯示器(手機螢幕)上最小的物理顯示單元，在作業系統的排程下，每一個裝置畫素都有自己的顏色值和亮度值。
• dips，（dip或dp或device independentpixels）指的是裝置獨立畫素(也叫密度無關畫素)，可以認為是計算機座標系統中得一個點，這個點代表一個可以由程式使用的虛擬畫素(比如： css畫素)，然後由相關係統轉換為物理畫素。

話說回來，dips到底有什麼用呢？ dip可以用來輔助區分視網膜裝置還是非視網膜裝置。

具體詳細內容請看張鑫旭大神的部落格關於devicePixelRatio的介紹。我這裡只簡單的說一下應用： 因為很多設計師的移動設計稿是基於iphone6做出來的，大家都知道iphone6的dpr=2(從iphone4開始就是2了)設計稿會給成750的，所以前端開發寫的 css畫素（裝置獨立畫素）= 裝置的物理畫素 / 2 = 750 / 2 = 375=蘋果6的螢幕寬度，你只需要把設計師的寬度縮小一半就好了。

附加擴充套件： 如何把網頁上的vueH5頁面顯示到手機觀看效果 1.臺式電腦和手機同時連結一個路由器，使用同一個wifi； 筆記本也可以直接啟用一個wifi，手機連結筆記本也wifi可以； 2.查詢本地IP地址，WIN+R，輸入cmd回車，開啟命令提示符，輸入ipconfig，檢視本地IPv4。 3.找到專案中config資料夾，下面index.js檔案開啟； 找到host: ‘localhost’, 改為上面本地IPv4地址； 4.藉助草料二維碼生成修改後專案地址的二維碼，

好！現在言歸正傳怎麼來製作web移動端的1px製作 先上程式碼，再說思路，估計有人看了程式碼就知道是什麼回事了

/*border-1px*/
  .border-1{
    position: relative;
  }
  .border-1::after{
    display: block;
    content: "";
    position:relative;
    left:0;
    bottom:
 
0;
    width:100%;
    border-top:1px solid #e5e6e8;
  }
  @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-1::after{
      -webkit-transform:scaleY(0.7);
      transform:scaleY(0.7);
    }
  }
  @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1::after{
      -webkit-transform:scaleY(0.5);
      transform:scaleY(0.5);
    }
  }

思路： 1.利用偽類，建立一條橫線，通過絕對定位，能夠保證此線條是位於元素的bottom位置的 2.利用媒體查詢，使用dpr來查詢，對偽類建立的橫線做縱向的縮放