vuejs开发webapp中，1px边框问题 (适合所有m端开发

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的东西，必须缩放，或者用其他方法？