1、纯PC端布局：
（1）通常以固定宽度布局，常见的宽度范围 950 - 1200
以width设置固定宽度，并居中。
（2）流式布局，宽度设置百分比配合max-width 、 min-width
以width设置百分比宽度来快速实现宽度自适应
2、纯移动端布局：
（1）rem / em，将宽和高从固定px到相对rem，实现屏幕自适应等比变化
（2）弹性盒子
（3）怪异盒模型
现如今大多数网站都存在PC和移动的双端显示，PC和移动会切换显示
需要检测屏幕宽度的变化，在不同宽度渲染不同的布局和样式。
（1）媒体查询，根据给出的媒体类型为条件，来检测设备宽度的变化
常见媒体类型：
1. screen，屏幕
常见的设计规范下的屏幕尺寸范围
（1）width < 768px 超小屏幕，手机屏幕
（2）width < 992px 小屏幕，平板（ipad）
（3）width < 1200px 大屏幕，桌面屏幕
（4）width ≥ 1200px 超大屏幕，大型的桌面屏幕
例如：壁纸网页
1. 在PC设备上，一行可显示4张壁纸
2. 在移动设备上
（1）ipad上，一行显示2张壁纸
（2）手机上，一行显示1张壁纸
（2）js的resize事件动态监听window窗口尺寸变化
1、媒体查询：实现在不同设备宽度下渲染不同布局和样式
2、媒体查询的语法:
（1）media：表示媒体
（2）screen：表示媒体类型设置为屏幕类型
（3）and：连接媒体类型和查询条件，左右两侧必须有空格
（4）width：规定固定的屏幕宽度
（5）min-width：规定屏幕的最小宽度，当屏幕宽度大于min-width时
（6）max-width：规定屏幕的最大宽度，当屏幕宽度小于max-width时
1、引入方式：
（1）通过link标签的media属性来规定媒体类型和查询条件，在条件符合的情况下引入对应的外联css文件
（2） 通过为style设置媒体类型及查询条件，来渲染不同条件下的不同style标签内的样式
设置方式与link标签的media相同
（3）在style标签中，声明媒体类型及查询条件，当条件符合时样式会覆盖默认样式
语法：
@media 媒体类型 and 查询条件 {
选择器{
符合查询条件的样式
}
}
注意：媒体查询一定要写在默认样式之后。