外卖商城类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来查询，对伪类创建的横线做纵向的缩放