宽度自适应布局
在前端开发过程中实现宽度适配是一项不可避免的任务。鉴于此，在考虑用户的显示终端尺寸或PC端用户主动调节浏览器窗口大小时，在布局设计中就必须充分考虑前后文环境以及设备特性带来的影响。
当直接参考UI的设计稿时
当直接参考UI的设计稿时
对几个前端框架应用情况的经验分享：横向自适应布局中发现的一类特性，在于其基础架构均基于媒体查询处理。值得注意的是，在实际应用中发现各框架或公司在设计时会根据自身的开发习惯对媒体查询进行定制。
但是使用媒体查询也有两种情况来使用css达到自适应布局的目的：
仅当针对每个min-width或max-width对应的CSS时配置根元素html的font-size属性，并在页面布局相关的CSS中统一采用rem作为尺寸单位时
另外一种方法是在每一个指定宽度（例如min-width或max-width）对应的CSS规则中编写一组不同的CSS代码段以适应不同尺寸设备的具体宽度要求。这样做的结果是使得每一个指定宽度范围内的布局都可以完全独立。通常情况下只包含与页面整体布局相关的CSS代码。而那些仅与元素的表现形式有关（如颜色、边距等）的相关代码通常是提取到所有媒体查询设置之外以减少混淆。这种方案还可以进一步结合前面提到的第一种方法在每一个具体的媒体查询中添加针对特定宽度设备的HTML字体大小设置。
举个例子：
bootstrap的自适应布局（只包含一部分）：（实际就是使用媒体查询的方式）
Bootstrap在布局机制上采用了独特的划分方式：它将整个行划分为十二个等分的小单元，并通过配置选项来指定每个元素占用多少个单元宽度。这一特点与Ant Design存在显著差异：后者采用更为细粒度的划分策略——将整个宽度划分为二十四份的小单元（即所谓的"24栅格系统"）。因此，在这种划分逻辑下，Bootstrap则被称为"12栅格系统"。
layout