vue响应式布局封装

1.公共样式里面封装
  @mixin media-lg() {
    @media screen and (min-width: 1200px){
        @content;
    }
  }
  //md--≥992 响应式
  @mixin media-md() {
    @media screen and (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
  }
  //sm--≥768px 响应式
  @mixin media-sm() {
    @media screen and (min-width: 768px) and (max-width: 991px) {
        @content;
    }
  }
  //xs--<768px 响应式
  @mixin media-xs() {
    @media screen and (max-width: 767px){
        @content;
    }
  }
  1. 文件引用
<style scoped lang="scss">
  .filter-item{
    width: '100px';
    @include media-lg() {
        width: '1000px';
    }
    @include media-md() {
    }
    @include media-sm() {
    }
    @include media-xs() {
    }
  }
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容