静态布局
-
描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的
-
优点：这个对于开发者来说是最简单的一种布局方式，没有什么兼容性的问题
-
缺点：当屏幕分辨率太低时，会展现出滚动条
-
场景：传统 web 网站
自适应布局
-
描述：不同屏幕分辨率下，保持原有展示方式。即元素的位置会变化而大小不会变化
-
优点：页面能够兼容不同分辨率的设备
-
缺点：屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式
-
场景：传统 web 网站
响应式布局
-
描述：不同屏幕分辨率下，展示方式不同
-
优点：一套代码兼容 web 端、平板、以及手机端网页
-
缺点：工作量大、UI 设计也需要多个版本
-
场景：同时兼容多种不同设备
弹性布局（em/rem 布局）
-
描述：使用 em 或 rem 单位进行相对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放
-
优点：所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
-
缺点：这种布局方式只是宽度自适应，高度却没有做到自适应
-
场景：同时兼容多种不同设备
弹性布局（flex 布局）
-
描述：目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用 flex 布局实现就变得非常容易
-
优点：简便、完整、响应式地实现各种页面布局
-
缺点：只兼容 IE10+的浏览器
-
场景：三栏式布局、垂直水平居中布局
流式布局（百分比布局）
-
描述：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。主要特征是像瀑布一样往下流，有规律的无限遍历模块。
-
优点：灵活，充分利用浏览器的空间
-
缺点：宽度按照屏幕进行适配调整，对于大屏幕来说用户体验并不是特别好，有些布局元素会显得很长
-
场景：类似抖音视频、微博消息、微信朋友圈等布局