vue开发饿了吗外卖app③——移动端高分辨率屏幕下边框1px变大问题通用解决

//新建mixin.styl
border-1px($color)
  position relative
  &::after
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid $color
    content ' '

//新建base.styl  直接在需要加边框的元素的class中加入border-1px即可
@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)
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px
    ::after
      -webkit-transform scaleY(0.5)
      transform scaleY(0.5)

//新建index.styl来整合这些基础通用文件，将此文件导入到main.js中
@import './mixin'
@import './base'
@import './icon'