响应式|css媒体响应式|elementUI响应式

一、css媒体响应式
1）媒体引入样式
html

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
<link rel="stylesheet" media=" (max-width:550px)" href="print.css">

在vue中进行引入：

<style scoped src="../static/css/user.css">
@import url('./Min.css') (max-width:550px);

2）使用方式
范围中显示

@media (min-width:551px) and (max-width: 1000px) {
  .box{
      background: #0f0;
  }
}
向上（大于551px）会应用
@media (min-width:551px) {
  .box{
      background: #0f0;
  }
}
向下（小于551px）会应用
@media (max-width:551px) {
  .box{
      background: #0f0;
  }
}

二、element-ui响应式布局
地址：https://element.eleme.cn/#/zh-CN/component/layout

    <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div class="grid-content bg-purple hidden-sm-and-down">
                样
            </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light">式</div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple">显</div></el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light">示</div></el-col>
    </el-row>

xs--<768px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})
sm--≥768px 
md--≥992px 
lg--≥1200px 
xl--≥1920px

基于断点的隐藏类
Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：

import 'element-ui/lib/theme-chalk/display.css';* 

包含的类名及其含义为：
hidden-xs-only- 当视口在xs尺寸时隐藏
hidden-sm-only- 当视口在sm尺寸时隐藏
hidden-sm-and-down- 当视口在sm及以下尺寸时隐藏
hidden-sm-and-up- 当视口在sm及以上尺寸时隐藏
hidden-md-only- 当视口在md尺寸时隐藏
hidden-md-and-down- 当视口在md及以下尺寸时隐藏
hidden-md-and-up- 当视口在md及以上尺寸时隐藏
hidden-lg-only- 当视口在lg尺寸时隐藏
hidden-lg-and-down- 当视口在lg及以下尺寸时隐藏
hidden-lg-and-up- 当视口在lg及以上尺寸时隐藏
hidden-xl-only- 当视口在xl尺寸时隐藏