elemenetui 布局_element-ui的响应式布局

由于之前对CSS研究的特别少，响应式啊美化啊动画啊做一点都很费劲。

最近又返回去看了下bootstrap的响应式用法，

才发现原来element-ui以及其他好几个vue的ui库都做过响应式的布局的组件，

但是由于自己了解不多，根本没有应用好。

以element-ui的布局为例：

官方文档地址

这是他响应式部分的代码示例：

详解

其实就是做了每行总共24个栅格，在不同尺寸的页面上如何分配宽度比例：

名称

尺寸

xs

<768px

sm

≥768px

md

≥992px

lg

≥1200px

xl

≥1920px

比如这里直接给xs赋值4，他的宽度在xs(<768px，手机)就是4/24。

除了直接给赋值数字，也可以给对象如：{span:18,offset:3}。

span即是仅赋值数值时的默认参数位，为宽度。

offset为从左边的偏移量，也是1/24为单位。

示例

立刻搞定之前想要的效果：宽屏页面时内容仅仅占页面宽50%居中显示。窄屏幕时占70%，手机时占100%。

gutter就是各col之间的间距。

这种方法其实使用的还是@media。但是确实方便配置多了。