固定布局、流式布局、弹性布局、自适应布局、响应式布局

固定布局、流式布局、弹性布局、自适应布局、响应式布局各种单位五种布局对比五种布局现在的技术选型建议各种单位单位作用特性应用布局说明px页面按精确像素表示绝对单位固定布局rem相对根节点html字体大小来计算相对单位弹性布局em基准点为相对父节点字体的大小相对单位弹性布局%相对父元素的大小设定比率相对单位流式布局vw视窗宽度的百分比1vw代表视窗宽度的1%视窗单位vh视窗高度的百分比1vh代表视窗高度的1%视窗单位vmin当前vw和vh中较小的一个值视窗单位vmax当前vw和vh中较大的一个值视窗单位五种布局对比布局类型衡量单位变化方式断点依赖典型场景固定布局px完全不变化无流式布局%连续拉伸/压缩无弹性布局em/rem随字号变化无自适应部署px media离散跳跃突变必须有响应式布局% rem px media混合平滑跳跃必须有应用场景五种布局不用严格区分布局主要是让页面可以完美的适应任何尺寸的屏幕各种布局应该相互嵌套使用以达到灵活高效的布局。理解跳跃 vs 平滑当你的浏览器窗口从 1200px 慢慢拖拽到 400px自适应在 1024px 时一切正常拖到 980px 时依然显示 1024 的固定内容出现滚动条一旦越过 768px 断点页面瞬间“闪”一下重新排列成平板的固定布局。响应式在 1024px 到 768px 之间文字和图片连续变窄越过 768px 断点底部的三栏 footer 会“跳”成垂直堆叠的一栏但顶部的导航条在 768px~400px 之间依然在平滑变宽变窄。五种布局固定布局Fixed Layout这是早期的网页设计方式。度量单位px像素。特点整个容器如 div.wrapper宽度写死比如 960px 或 1200px。无论你的浏览器窗口是 300px 宽还是 4K 显示器页面始终是那么宽。优点设计师完全掌控像素级效果排版不会乱。致命缺点在小屏手机上会出现横向滚动条体验极差在大屏显示器上则四周大片空白极其浪费。现状已基本被淘汰仅用于企业内部老旧系统或固定尺寸的广告落地页。流式布局Liquid / Fluid Layout为了解决固定布局在大屏太空、小屏太挤的问题而诞生。度量单位%百分比。特点容器宽度随浏览器窗口大小 连续平滑地 拉伸或收缩。例如设置 width: 100%窗口变宽内容就变宽窗口变窄内容就挤在一起。优点充分利用屏幕空间没有横向滚动条。致命缺点极端尺寸下视觉效果崩溃。比如在 4K 屏幕上一行文字可能长达 60 个汉字极难阅读在手机竖屏上图片和按钮会被压成“面条”。现状很少单独使用通常作为“响应式布局”的基础技术即让元素宽度自适应。弹性布局Elastic Layout这个术语常被误解成 CSS 的 Flexbox弹性盒子但在传统的布局分类中它特指相对于字号缩放的布局。度量单位em 或 rem相对字体大小单位。特点容器宽度不随窗口大小变化而是随 浏览器基础字号font-size 变化。如果用户按下 Ctrl 放大文字整个容器就像橡皮筋一样被撑大。优点极强的无障碍性。适合视力不佳需要放大字体阅读的老年人所有内容会等比放大不会错位。缺点不随窗口变化依然无法适配手机横竖屏。现状常用于文本密集型网站如维基百科、新闻阅读器作为辅助响应式的手段。自适应布局Adaptive Layout——关键区分点这是最容易和“响应式”混淆的概念。二者的本质区别在于变化是否连续。度量单位px media 媒体查询。特点设计师预先针对几种典型的屏幕宽度如 320px 手机、768px 平板、1024px 桌面设计 几套完全不同的固定宽度页面。当浏览器宽度发生变化时页面不是慢慢拉长而是在到达临界点时“啪”地一下瞬间跳转到对应尺寸的页面布局。类比就像给不同身高的人准备 S、M、L 三件固定尺码的衣服。优点代码相对简单兼容性好针对特定设备如 iPad优化效果极佳。缺点无法覆盖所有中间尺寸比如 900px 宽时要么用 768 的模板强行拉伸要么用 1024 的模板出现滚动条维护多套代码成本高。现状多用于早期的移动端 m. 子域名站点如 m.taobao.com 与 www.taobao.com 分开开发。响应式布局Responsive Layout——当今主流由 Ethan Marcotte 在 2010 年提出它是前几种技术的 “终极融合”。度量单位%流式 rem弹性 media断点 灵活图片max-width:100%。特点连续与跳跃并存。在同一个断点区间内元素宽度随窗口 平滑拉伸流式而当窗口窄到某个临界点布局结构比如由三栏变为两栏或导航折叠成汉堡菜单则 跳跃切换自适应。类比就像一件添加了魔术贴的“均码”衣服既能在一定范围内松紧伸缩又能在极端情况下改变形态。优点一次开发所有设备通用完美覆盖从 320px 到 超大屏的所有宽度无需维护多套代码。缺点代码体积较大加载性能要求稍高需请求额外 CSS设计复杂性陡增。现在的技术选型建议如今前端开发百分之九十的场景都在做“响应式布局”。但具体落地时我们会结合使用宏观结构变化用 media 断点来自自适应思想。微观元素宽度用 % 或 vw/vh来自流式思想。间距与字号用 rem 单位来自弹性思想方便用户调整浏览器字号时整体缩放。