关于html:第-10-题谈谈你对静态布局自适应布局响应式布局弹性布局流式布局的理解

动态布局

• 形容：就是设定好的长和宽，大小不会扭转，不论你多大的屏幕它都是那么大，分辨率是不会扭转的
• 长处：这个对于开发者来说是最简略的一种布局形式，没有什么兼容性的问题
• 毛病：当屏幕分辨率太低时，会展现出滚动条
• 场景：传统 web 网站

自适应布局

• 形容：不同屏幕分辨率下，放弃原有展现形式。即元素的地位会变动而大小不会变动
• 长处：页面可能兼容不同分辨率的设施
• 毛病：屏幕太小会产生内容过于拥挤。所有的设施看起来都是一样的网站，不过是长度或者图片变小了，不会依据设施采纳不同的展现款式
• 场景：传统 web 网站

响应式布局

• 形容：不同屏幕分辨率下，展现形式不同
• 长处：一套代码兼容 web 端、平板、以及手机端网页
• 毛病：工作量大、UI 设计也须要多个版本
• 场景：同时兼容多种不同设施

弹性布局（em/rem 布局）

• 形容：应用 em 或 rem 单位进行绝对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放
• 长处：所有屏幕的高宽比和最后的设计高宽比一样，或者相差不多，完满适应
• 毛病：这种布局形式只是宽度自适应，高度却没有做到自适应
• 场景：同时兼容多种不同设施

弹性布局（flex 布局）

• 形容：目前比拟风行的一种布局，应用传统布局难以实现一些简单的布局，应用 flex 布局实现就变得非常容易
• 长处：简便、残缺、响应式地实现各种页面布局
• 毛病：只兼容 IE10+ 的浏览器
• 场景：三栏式布局、垂直程度居中布局

流式布局（百分比布局）

• 形容：页面元素的宽度依照屏幕分辨率进行适配调整，但整体布局不变。次要特色是像瀑布一样往下流，有法则的有限遍历模块。
• 长处：灵便，充分利用浏览器的空间
• 毛病：宽度依照屏幕进行适配调整，对于大屏幕来说用户体验并不是特地好，有些布局元素会显得很长
• 场景：相似抖音视频、微博音讯、微信朋友圈等布局

文章的内容 / 灵感都从下方内容中借鉴

• 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
• 【大数据可视化图表插件】https://www.npmjs.com/package…
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/