饿了么项目---4、移动端查看项目及border 1像素问题

一、如何在手机等移动端查看页面

1.1查看电脑IP地址

$ ipconfig---------->10.2.65.112

1.2 、获取当前网页的完整url地址，到草料二维码网站(http://cli.im/)中讲该ip地址转变成一个二维码,手机端扫码打开。

手机端打开的网页类似于客户端浏览器打开的网页，开发代码过程会自动反应到手机端上。

注意事项：手机与电脑要处在同一局域网中

二、border 1px问题

由于devicePixelRatio设备像素比的存在，移动端永远无法使用border-bottom属性实现一个统一的1px细线。这个时候要去做一条细线就会需要很多技巧和经验。
代码如下：

#app .tab{
  position: relative;
}
.tab:after{
    pointer-events: none;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:0;
    content:"";
    border-bottom: 1px solid rgba(7,17,27,0.1); 
}
/*设备像素比例为2时*/
@media only screen and (-webkit-min-device-pixel-ratio:2.0),
only screen and (min-device-pixel-ratio: 2.0) {
    .tab:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

这条横细线通过上面这种样式呈现出来。这种方式的核心在于使用transform:scaleY来使得1px的border得以收缩，最终呈现出细线的效果