共计 873 个字符，预计需要花费 3 分钟才能阅读完成。
动态布局
- 形容：就是设定好的长和宽，大小不会扭转，不论你多大的屏幕它都是那么大，分辨率是不会扭转的
- 长处：这个对于开发者来说是最简略的一种布局形式，没有什么兼容性的问题
- 毛病：当屏幕分辨率太低时，会展现出滚动条
- 场景：传统 web 网站
自适应布局
- 形容：不同屏幕分辨率下，放弃原有展现形式。即元素的地位会变动而大小不会变动
- 长处：页面可能兼容不同分辨率的设施
- 毛病：屏幕太小会产生内容过于拥挤。所有的设施看起来都是一样的网站，不过是长度或者图片变小了，不会依据设施采纳不同的展现款式
- 场景：传统 web 网站
响应式布局
- 形容：不同屏幕分辨率下，展现形式不同
- 长处：一套代码兼容 web 端、平板、以及手机端网页
- 毛病：工作量大、UI 设计也须要多个版本
- 场景：同时兼容多种不同设施
弹性布局（em/rem 布局）
- 形容：应用 em 或 rem 单位进行绝对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放
- 长处：所有屏幕的高宽比和最后的设计高宽比一样，或者相差不多，完满适应
- 毛病：这种布局形式只是宽度自适应，高度却没有做到自适应
- 场景：同时兼容多种不同设施
弹性布局（flex 布局）
- 形容：目前比拟风行的一种布局，应用传统布局难以实现一些简单的布局，应用 flex 布局实现就变得非常容易
- 长处：简便、残缺、响应式地实现各种页面布局
- 毛病：只兼容 IE10+ 的浏览器
- 场景：三栏式布局、垂直程度居中布局
流式布局（百分比布局）
- 形容：页面元素的宽度依照屏幕分辨率进行适配调整，但整体布局不变。次要特色是像瀑布一样往下流，有法则的有限遍历模块。
- 长处：灵便，充分利用浏览器的空间
- 毛病：宽度依照屏幕进行适配调整，对于大屏幕来说用户体验并不是特地好，有些布局元素会显得很长
- 场景：相似抖音视频、微博音讯、微信朋友圈等布局
附加
- 此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨
- 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
- 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/
正文完
