element-UI响应式布局

参数详解：

0、官网layout布局介绍

1、屏幕大小尺寸参数

名称	尺寸
xs（最小号 ）	<768px
sm（小号）	≥768px
md（中号）	≥992px
lg（大号）	≥1200px
xl（更大号）	≥1920px

row 代表行：

col 代表行列:

tip：col组件的:span属性的布局调整,一共分为24栏（以下分别代表24列，12列）
 

//24列

   
       

   


//12列

    
        

    

row组件的:gutter属性来调整布局之间的宽度---分栏间距（如下图）

 

 Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

1. justify=center 居中对齐
2. justify=start 左对齐
3. justify=end 右对齐
4. justify=space-between 空格间距在中间对齐
5. justify=space-around 左右各占半格空格对齐

项目中用到过得媒体查询：

@media (max-width: 1910px) and (min-width: 980px) {两个数值之间的(zhyd)}

@media screen and (min-width: 981px) {PC}

@media screen and (max-width: 980px) {Mobile}