1px问题
首先说说，为什么会存在1px的问题，由于现在市场上的移动设备屏幕种类太多，dpr不同，设计师给的稿子，上面明明是1px的线，在高分辨率的屏幕下，可能显示成2px，甚至更大，然而对于有强迫症的设计师，这点是不能容忍的，所以就出现了1px的问题。
1px解决方法有很多，我一般用媒体查询@meaia 配合 transfomX/Y（） 来实现m端的真正1px，这种方法仅限于边框（无圆角），分割线等等，可能有更好的方法，但是我没去研究，有小伙伴了解的，可以分享下哦～
下面说说实现方式：
我用的是stylus，首先要配置vue-cli脚手架的webpack：
在package.js文件中加入
"stylus-loader": "^2.5.0",
"stylus": "0.52.4",
然后
$ npm install
或者直接运行
$ npm i stylus-loader stylus --save
配置完webpack记得要重启
$ npm run dev
使用stylus要在style标签中作如下配置，
<style scoped lang="stylus" rel="stylesheet/stylus">
(使用sublime的同学，记得要安装stylus高亮插件，可以使用packageinstall安装，ctrl+shit +p => 输入install 选择 package install ，输入stylus，然后安装，如果不能使用命令安装的，可以手动安装，preference=> 浏览资源包，然后下载stylus-master插件 http://pan.baidu.com/s/1nuXh51J ，然后解压在目录当中，重启sublime就可以啦)
下面是实现代码
<-- css部分!-->
//因为这个1px边框在项目中可能很多地方都能用到，那么定义一个mixin
border-1px($color)
position:relative
&:after
display:block
position:absolute
left:0
bottom:0
width:100%
border-top:1px solid $color
content:' '
//定义边框样式
.border-1px
border-1px(rgb(255,222,122))
//媒体查询
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform:scaleY(0.7)
transform:scaleY(0.7)
//-webkit-min-device-pixel-ratio 有多个值，可以根据项目需求定义更多的值来适配不同的机型，详细请查看本文最后的参考
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5)
<-- html部分!-->
//使用样式
<div class="nav border-1px">
<div class="item"><router-link to="/product">商品</router-link></div>
<div class="item"><router-link to="/mark">评价</router-link></div>
<div class="item"><router-link to="/detail">详情</router-link></div>
</div>
注意，如果样式表分成多个文件，最好new一个index.styl文件，引入所有样式表，再由入口文件引入index.styl
并且，引入styl文件使用的是
@import 'url'
参考：
-webkit-min-device-pixel-ratio的常见值对照
还有个问题，rem是个相对单位，是不是也能解决1px的问题呢？好像不可以，rem通过换算还是变成1px ，有些设备是化不出1px的东西，必须缩放，或者用其他方法？
