静态布局说明：设置长度和宽度不会改变大小。 无论屏幕多么大，分辨率都不会改变
优点：这是开发者最简单的布局方式，没有兼容性问题
缺点：屏幕分辨率过低时，会显示滚动条
场景：传统网站
自适应布局说明：以不同的屏幕分辨率保持原始显示方式。 也就是说，元素的位置会改变，但大小不会改变
优点：页面与不同分辨率的设备兼容
缺点：画面太小的话内容会太拥挤。 所有设备看起来都是同一个站点，但只是长度和图像变小了，不会根据设备采用不同的展示样式
场景：传统网站
响应型布局说明：显示方法因画面分辨率而异
优点：与web端、平板电脑和手机端网页兼容的代码集
缺点：工作量大，UI设计也需要多个版本
场景：与多个不同设备同时兼容
灵活布局(em/rem布局)说明：使用em或rem单位进行相对布局，以不同的屏幕分辨率均匀缩放页面所有元素的tmdgb
优点：所有屏幕的tmdgb比与最初设计的tmdgb比相同或相同，完全适应
缺点：这种布局方式只能适应宽度，不能适应高度
场景：与多个不同设备同时兼容
灵活布局(flex布局)说明：这是当前流行的布局，传统布局很难实现复杂的布局，在flex布局中实现非常容易
优点：轻松、完整、响应性地实现各种页面布局
缺点：只有IE10浏览器兼容
场景：三栏布局、垂直水平中心布局
流布局(百分比布局)说明：页面元素的宽度将根据屏幕分辨率进行调整，但总体布局保持不变。 其主要特征是像瀑布一样倾泻而下、规则的无限遍历模块。
优点：灵活，可以利用浏览器空间
缺点：根据屏幕调整宽度，在大屏幕上用户体验不太好，根据布局要素，看起来会很长
场景：灾难视频、微博消息、微信朋友圈等布局
#
文章的内容/灵感都从下方内容中借鉴【持续维护/更新500前端问题/笔记本】https://github.com/noxussj/interview-questions/issues
【大数据可视化图形插件】https://www.NPM js.com/package/ns-e charts
【基于THREE.JS的3D城市建模(珠海市)】https://3d.noxussj.top/