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文件
当屏幕宽度为200px时，引入a.css<link rel="stylesheet" href="a.css" media="screen and (width:200px)"> 当屏幕宽度大于等于768px时，引入b.css<link rel="stylesheet" href="b.css" media="screen and (min-width:768px)"> 当屏幕宽度小于992px时，引入c.css<link rel="stylesheet" href="c.css" media="screen and (max-width:992px)"> 当屏幕宽度大于等于768px并且小于992px时，引入d.css<link rel="stylesheet" href="d.css" media="screen and (min-width:768px) and (max-width:992px)">
作者：稚初_1d4c
链接：https://www.jianshu.com/p/b5c180e31e6c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
