第 10 题：谈谈你对静态布局、自适应布局、响应式布局、弹性布局、流式布局的理解？

静态布局

• 描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的

• 优点：这个对于开发者来说是最简单的一种布局方式，没有什么兼容性的问题

• 缺点：当屏幕分辨率太低时，会展现出滚动条

• 场景：传统 web 网站

自适应布局

• 描述：不同屏幕分辨率下，保持原有展示方式。即元素的位置会变化而大小不会变化

• 优点：页面能够兼容不同分辨率的设备

• 缺点：屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

• 场景：传统 web 网站

响应式布局

• 描述：不同屏幕分辨率下，展示方式不同

• 优点：一套代码兼容 web 端、平板、以及手机端网页

• 缺点：工作量大、UI 设计也需要多个版本

• 场景：同时兼容多种不同设备

弹性布局（em/rem 布局）

• 描述：使用 em 或 rem 单位进行相对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放

• 优点：所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应