宽度自适应布局

前端开发中宽度自适应是不可避免的问题，毕竟为了考虑到不同用户的显示终端的尺寸或者在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的自适应布局（只包含一部分）：（实际就是使用媒体