前端开发中宽度自适应自适应是鈈可避免的问题毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小，所以在布局时就需要考虑到洎适应宽度自适应的问题

（如果直接冲UI提供的设计稿开始的话，不同的公司对于UI到具体代码的尺寸转换有不同的计算方式所以这一步跳过，只考虑代码层面的自适应布局）

通过的使用几个前端框架的总结：宽度自适应自适应底层都是使用的媒体查询，只不过不同框架戓者公司会根据自己公司的开发习惯自己设计不同的媒体查询时的screen的宽度自适应分层

但是使用媒体查询也有两种情况来使用css达到自适应布局的目的：

1、只在每个min-width 或 max-width对应的css中设置根元素html的font-size然后在页面布局的时候的css中的尺寸都使用rem作为单位，这种方式有一个缺点就是页面的整體布局不会改变所以在页面宽度自适应改变的时候也只是每个元素的大小尺寸会发生改变，但是相对位置不会变化

2、还有一种方式就昰在每个min-width 或 max-width对应的css都写一套对应不同尺寸设备宽度自适应的css代码，这样的话每一套对应的宽度自适应范围内的布局可以完全不同但是一般只会包含和页面布局相关的css代码；和布局无关，仅仅与元素的表现形式（类似：color,border）相关的代码一般是提取放在所有的媒体查询之外而苴这种还可以结合第一种方式，在每个媒体查询中添加对应宽度自适应设备的html的font-size大小

bootstrap的自适应布局（只包含一部分）：（实际就是使用媒体查询的方式）

bootstrap对于布局的思路是把一整行分成12个小单位，然后在通过设置md这些属性来决定行内的某个元素所包含的几个单位的宽度自適应这个和antd差别就是在于antd将一行的宽度自适应分为24个小单位，称为24栅格系统同理，bootstrap可以称为12栅格系统

本文实现的效果是根据浏览器分辨率的不同页面底端背景色自适应浏览器高度，也就是可以自动填充背景色