elementui设置子元素上下布局 elementui页面布局

引言

之前的文章介绍过bootstrap的响应式布局，帮助我们在手机上适配电脑上的页面，
当然媒体查询也是一个很不错的适配方法
今天带你们了解Element UI的适配方法

Element的栅格系统

bootstrap的栅格系统为12栏，而Element UI划分的更细一点，它拥有24栏
那么怎么划分栏呢，方法非常简单，

<el-row></el-row>标签定义一行，也就是24栏在这一行中进行划分，
<el-col></el-col>定义换分出来的份数，我们的响应式布局就以它两为基础

代码初体验：（我们使用的是Vue哦，别忘了）

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row :gutter="10">
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
    </div>
</template>

<script>
  export default {
    name: "Layout"
  }
</script>

<style scoped>
    .el-row{
        margin-bottom: 20px;
    &:last-child{
         margin-bottom: 0;
     }
    }
    .el-col{
        border-radius: 4px;
    }
    .bg-purple-dark{
        background-color: #99a9bf;
    }
    .bg-purple{
        background-color: #d3dce6;
    }
    .bg-purple-light{
        background-color: #e5e9f2;
    }
    .grid-content{
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg{
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

运行效果图：（当然我们也可以通过 :offset="n"来设置偏移份数(24>=n>=0)）

这是响应式吗？不是！，接下来我们根据屏幕的不同来分配大小：

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="2" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="7" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="7" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="6" :lg="7" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

各位可以运行一下感受哦，浏览器怎么看响应式布局呢？图解：

找一找这个小手机图标，不同的浏览器它的位置不同哦然后顶栏可以调分辨率或者点击调

左右也是可以拉动的哦

再点击一下小手机就可以退出响应式查看了下面是对应的尺寸表

通过设置以上的尺寸对应的名称值来动态的改变我们的布局就可以达到响应式的效果了

有时候我们不知道如何调整布局怎么办，比如搜索框太大我们缩小不了，这时候我们可以动态的将一些组件进行隐藏或者显示，相应的表奉上：

使用之前在main.js中引入:

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

完整配置:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';

Vue.use(ElementUI);

这些都是给el-col的类添加哦！

如果以上还不好使，那就采用媒体查询吧！

例：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，
@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

以下信息来自于菜鸟教程:

mediatype的类型:

媒体的功能：