在stylus中使用媒体查询遇到的一个坑

在vue.js高仿饿了么学习中，在做评论标签页面时，在iphone5手机屏上会显示折行的不良效果，如下图所示：

对照视频教学上的做法如下：

页面结构

<div class="overall">
        <div class="overall-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="text">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="overall-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star class="star" :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star :size="36" :score="seller.foodScore"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>

stylus样式

.overall
      display flex
      padding 18px 0
      text-align center
      .overall-left
        flex 0 0 130px
        width 130px
        padding 6px 0
        border-right 1px solid rgba(7, 17, 27, 0.2)
        @media screen and (max-width: 320px)
          flex 0 0 100px
          width 100px
        .score
          margin-bottom 6px
          line-height 28px
          font-size 24px
          color rgb(255, 153, 0)
        .text
          margin-bottom 8px
          line-height 18px
          font-size 12px
          color rgb(7, 17 ,27)
        .rank
          line-height 10px
          font-size 10px
          color rgb(147, 153, 159)
      .overall-right
        flex 1
        padding 6px 0 6px 24px
        text-align left
        @media screen and (max-width: 320px)
          padding 6px 0 6px 12px

核心是在css下利用了媒体查询，红色字体所示；

但预览效果始终没有效果，而视屏中的iphone5和6切换却效果慢慢，哪里出了问题呢?十分的困惑，开始考虑是否vue-cli项目少了stylus-loader之类对@media的语法支持，又查询了stylus官网这种写法的合理性及依据：见如下图所示：

说明语法是正确的且支持的，接着各种改进尝试未果！再仔细想想可能是媒体查询的尺寸不对，和Chrome模拟的尺寸不符合有关系，于是把320px改成330px，果然生效了，表情无语！只能说是个坑！记录下防止日后再次遇到此坑。