外賣商城類app（二）

這一節就主要說說如何實現移動端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.藉助草料二維碼生成修改後項目地址的二維碼，https://cli.im/
5.重新啓動項目，然後瀏覽器地址輸入本機地址http://192.168.0.107:8080 訪問項目PC端項目； 然後，手機微信掃描二維碼就可以訪問啦！當然用手機遊覽器也行

好！現在言歸正傳怎麼來製作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來查詢，對僞類創建的橫線做縱向的縮放