element的响应式布局 vue做响应式布局

“自己写的前端页面只能适配自己电脑，一旦再他人电脑上打开布局全乱”

就这个问题已经困扰我许久，尤其是当我在手机上打开时尤为明显话不多说，上图！

很正常的模样是吧？看手机效果

那一瞬间，我觉得我是个fw(法王)终于在我的不懈努力下，终于实现了动态的页面效果！

如下图：

虽然还有些问题，但是！我觉的问题不大

主要用到的就是elementui中布局的响应式属性：

以及

css3

的响应式布局

@media

首先来说elementui布局的响应式属性

elementUi将一行划分成24块，可以通过使用el-row和el-col标签进行对每一块的所属进行划分，通过在el-col中增加span属性表示该标签占几块。
但这样的弊端就是即时你在el-col标签中放有超过他自身宽度的内容，他也不会将后面的el-col标签挤到下一行，也就是说当浏览器的宽度变窄时，el-col标签的宽度也会变窄，就会出现我所写的游乐场项目中出现的情况。
而增加响应式栅格数或者栅格属性对象后，你可以根据你的需要对到达指定宽度后的布局进行改动。
例如：当用电脑浏览器打开时，一行展示六列，当用手机打开时一行展示两列，这些都是可以完成的。

<el-col :span="4" v-for="(o, index) in 10" :key="index" :offset="1" :xs="{span:10,offset:1}" >
                <el-card>
                要展示的内容，例如图片
                </el-card>
</el-col>

上方的代码就实现了当我的浏览器的宽度 >768px 时，将一个el-col标签所占有的格数从4变成10，这样一行的数量就从原来的4改成了2

再来说说css3的响应式布局

说实话，这个我也用的不太明白，但可以实现的功能也是根据浏览器的变化而实现不同的css样式。

@media screen  and (max-width: 700px){
        div {
            color: #42b983;
        }
    }

简单来说当宽度低于700px时div标签中文字的颜色就变成了绿色

当然只是一个简单的使用，若有不对地方，还望海涵