我们的课程主要是Vue框架，关于样式的部分（兼容性、适配、响应式）这些是css的范畴了。小伙伴们，需要自己去学习，去实践。

css中除了rem，还有em，微信小程序里面还rpx，这些有具体的应用场景。

实时生活中，使用scss的mixin，可以很好解决响应式的问题。

配置类似于bootstrap的这种多宽度下的样式条件，如：

@mixin respond-to($media) {
  @if $media == small-screens {
    @media only screen and (max-width: $break-small) {
      @content;
      //   transition: width 1s;
    }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small +1 ) and (max-width: $break-media){
      @content;
      //   transition: width 1s;
    }
  }
  @else if $media == big-screens {
    @media only screen and (min-width: $break-media + 1){
      @content;
      //   transition: width 0.2s;
    }
  }
  @else if $media == max-screens {
    @media only screen and (min-width: $break-max){
      @content;
      //   transition: width 0.2s;
    }
  }@else if $media == less-max-screens{
    @media only screen and (max-width: $break-max){
      @content;
      //   transition: width 0.2s;
    }
  }
}

再配置一个变量

//response
$break-small: 320px;
$break-media: 375px;
$break-max: 414px;

写 px 是不足以适配各个机型的，需要用到 rem，建议去学习慕课网有关移动端适配的相关课程。