【前端3分钟】布局

响应式布局方案

• https://www.cnblogs.com/HCJJ/p/6408363.html

布局结构

网页布局结构，通常分为三种：

• 通栏

这里写图片描述

• 多栏

又分为：等分多栏与非等分多栏

这里写图片描述

布局方式

• 固定布局：使用像素（px）作为页面基本单位；
• 弹性布局：使用百分比（%）作为页面基本单位；
• 混合布局：使用像素（px）和百分比（%）两种单位作为页面单位。

通常而言，通栏、多栏等分结构的布局，适合使用弹性布局；而多栏非等分的布局，适合使用混合布局。

布局变化

当进行响应式设计时，需要根据页面尺寸增减内容或者改变布局方式扩大设备的体验覆盖率。

通常，布局变化有三种形式：

• 模块位置变换，如导航栏在移动端与桌面端的位置变化；

这里写图片描述

• 模块展示方式改变，如显示、隐藏；

这里写图片描述

• 模块数量改变，如增加、减少。

这里写图片描述