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

本篇文章主要讲述使用Flex布局、Grid布局以及媒体查询三种方式来实现响应式布局。
文章涉及代码在线coding地址

效果图：

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

Flex布局

阮一峰Flex布局讲解

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

将可能会出现在一行的表单项放在一个父级容器内

父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行

设置容器内每一项元素的flex: 0 0 420px;(420px为每一项元素的基础宽度)

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

不用写媒体查询可实现屏幕变大列数自动变多

展示多行时，行列之间上下能够对齐

缺点：

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

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

将可能会出现在一行的表单项放在一个父级容器内

父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行

设置容器内每一项元素的flex: 1 0 420px;

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

不用写媒体查询可实现屏幕变大列数自动变多

增量空间不足，不足以容纳新列时，其他列自动拉宽

缺点：

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

Grid布局

阮一峰Grid布局讲解

设置父容器为grid布局

设置每一列的宽度为自动填充，最小宽度420，最大1fr

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

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

缺点

有兼容性问题


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

media媒体查询

将可能会出现在一行的表单项放在一个父级容器内

父级容器设置flex-flow: row wrap;表示横向排列，空间不足时换行

根据不同的屏幕宽度设置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%; } 优点：

兼容性强

实现各屏幕大小下展示不同的列数

缺点：

需要写多个媒体查询

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