饿了么项目---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得以收缩，最终呈现出细线的效果