Flex、Grid、媒体查询实现响应式布局

本篇文章主要讲述使用Flex布局、Grid布局以及媒体查询三种方式来实现响应式布局。

文章涉及代码在线coding地址

效果图：

文字描述：

屏幕大小不同，展示列数不同，1-5号按照屏幕大小可展示2到4列不等，6号始终独占一行

Flex布局

阮一峰Flex布局讲解

方案1（每一项元素不放大）

1. 将可能会出现在一行的表单项放在一个父级容器内
2. 父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行
3. 设置容器内每一项元素的flex: 0 0 420px;(420px为每一项元素的基础宽度)

flex: 0 0 420px;
等同于
flex-grow: 0;
flex-shrink: 0;
flex-basis: 420px;

优点：

1. 不用写媒体查询可实现屏幕变大列数自动变多
2. 展示多行时，行列之间上下能够对齐

缺点：

当增量空间不足时，右侧余出大量空白，不满足UI适配规范

方案2（每一项元素放大）

1. 将可能会出现在一行的表单项放在一个父级容器内
2. 父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行
3. 设置容器内每一项元素的flex: 1 0 420px;

flex: 1 0 420px;
等同于
flex-grow: 1;
flex-shrink: 0;
flex-basis: 420px;

优点：

1. 不用写媒体查询可实现屏幕变大列数自动变多
2. 增量空间不足，不足以容纳新列时，其他列自动拉宽

缺点：

1. 展示不下另起一行的列与上一列对应列未对齐（尝试过不可通过占位等实现，字段个数不确定，不好占位）
   
   

Grid布局

阮一峰Grid布局讲解

1. 设置父容器为grid布局
2. 设置每一列的宽度为自动填充，最小宽度420，最大1fr

display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));

优点

可实现随屏幕大小变化，列数跟随变化，并可上下列对齐。

缺点

有兼容性问题





如果不考虑兼容性问题，可以考虑使用Grid布局，完美实现

media媒体查询

1. 将可能会出现在一行的表单项放在一个父级容器内
2. 父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行
3. 根据不同的屏幕宽度设置flex: 0 0 50%(两列)/33%(三列)/25%(四列)

@media screen and (max-width: 1280px) {
    flex: 0 0 50%;
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
    flex: 0 0 33.33%;
}
@media screen and (min-width: 1441px) {
    flex: 0 0 25%;
}

优点：

1. 兼容性强
2. 实现各屏幕大小下展示不同的列数

缺点：

1. 需要写多个媒体查询
   
   

到这里，三种实现响应式布局的方式就记录完了！！每天都要进步一点点！