NeoTerm自动补全功能使用教程：让命令输入更快速准确
2026/8/6 23:11:22
固定布局、流式布局、弹性布局、自适应布局、响应式布局
- 各种单位
- 五种布局对比
- 五种布局
- 现在的技术选型建议
各种单位
| 单位 | 作用 | 特性 | 应用布局 | 说明 |
|---|---|---|---|---|
| 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 单位（来自弹性思想），方便用户调整浏览器字号时整体缩放。