饿了么webapp之1px边框

DPR手机端物理像素是设备像素的两倍，在stylus下定义一个mixin.styl；

在styl中定义一个函数，并且可以传入一个color

border-1px($color)
  position : relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    border-top 1px solid $color
    width: 100%  /* absolute没有宽度 */
    content: ''
在App.vue中引入样式并使用

@import './common/stylus/mixin.styl';
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7, 17, 27, 0.1))
  .tab-item
    flex: 1
    text-align: center
    & > a
      display : block /* 不用点到a标签的字上就可以，标签所在的块皆可 */
      font-size : 14px
      color : rgb(77,85,93)
      &.active
        color: rgb(240, 20, 20)
这时候并没有实现缩放，这时候需要对类实现一个缩放，真正的成为一个一像素的边框

假设给当前的tab再应用一个class样式，起名为border-1px；

<div class="tab border-1px">
然后去全局的定义这个class，chua创建base.styl;

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
 .border-1px
  &::after
    -webkit-transform : scaleY(0.7)
    transform : scaleY(0.7)
 
@media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
 .border-1px
  &::after
    -webkit-transform : scaleY(0.5)
    transform : scaleY(0.5)
/* base.styl 在border-1px类中定义的是全局变量，用于横线的缩放 */
定义完之后要进行全局的引用，我们创建一个index.styl中import所有的styl

@import "./mixin.styl"
@import "./base.styl"
@import "./icon.styl"
之后在main.js中进行全局引用index.js即可，这样，在整个项目中都可以使用这个样式了

/* 引入样式 index.styl 在webpack-base中配置alias 加入common：，之后就不用加./了 */
import './common/stylus/index.styl';
可以在webpack.base.config.js中定义alis别名，随便，如果修改了webpack记得npm.install

不要忘记在icon.styl中修改引入字体的默认路径，否则会找不到字体的路径

@font-face 
  font-family: 'sell-icon'
  src:  url('../fonts/sell-icon.eot?2f8f02');
  src:  url('../fonts/sell-icon.eot?2f8f02#iefix') format('embedded-opentype'),
    url('../fonts/sell-icon.ttf?2f8f02') format('truetype'),
    url('../fonts/sell-icon.woff?2f8f02') format('woff'),
    url('../fonts/sell-icon.svg?2f8f02#sell-icon') format('svg')