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

效果图：

效果图.png
文字描述：
屏幕大小不同，展示列数不同，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适配规范
Flex方案1.png

方案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. 展示不下另起一行的列与上一列对应列未对齐（尝试过不可通过占位等实现，字段个数不确定，不好占位）
    Flex方案2.png

Grid布局

阮一峰Grid布局讲解

  1. 设置父容器为grid布局
  2. 设置每一列的宽度为自动填充，最小宽度420，最大1fr
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));

优点

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

缺点

有兼容性问题
Grid兼容性.png
Grid布局.png
如果不考虑兼容性问题，可以考虑使用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. 需要写多个媒体查询
    媒体查询.png

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

版权声明：本文为eyunhua原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/eyunhua/p/13745648.html