网页版式常见 4 种基础布局，一次性讲明白

在数字化品牌建设浪潮之下，企业官网早已不再只是简单的线上名片，而是品牌对外传递实力、展示产品、承接客户线索的核心数字阵地。很多企业在网站改版、新站建设的过程中，把绝大多数注意力放在视觉特效、3D 素材、配色方案上，却忽略了版式布局这个网页设计最底层的根基。版式布局是整个网页的隐形骨架，骨架搭建不合理，再精美的图片、再出彩的文案，都很难发挥出应有的传播效果。

上海雍熙深耕高端网站建设多年，服务超过 120 家上市公司，落地了宁德时代、宇通客车、科大讯飞、正泰电器、博世、京东方、固德威等大量头部企业官网项目，在大量实战案例中发现，绝大多数网站体验差、用户浏览混乱、跨设备展示异常的根源，都来自布局选型的失误。市面上网页版式纷繁复杂，各种风格、模块组合层出不穷，但剥开表层视觉，所有网页几乎都源自四种基础布局：固定布局、流式布局、弹性布局、响应式布局。这四种布局各自拥有独特的底层逻辑、优势短板、适配场景，不存在绝对的好坏，只有适配与否的区别。

很多从业者、企业负责人很容易混淆这四类布局，把流式布局等同于响应式，误以为弹性布局就可以完美适配全部设备，最终在项目中踩坑。本文结合大量 B 端企业官网真实案例，抛开代码，纯粹从设计、业务、用户体验的角度，完整拆解这四种网页基础布局，讲清楚每一种布局的核心原理、优势、局限、适用行业与场景，同时分析在企业官网设计当中如何做取舍，帮助建站决策者、设计师、运营人员建立完整的布局认知体系。

一、固定布局：网页时代的初代标准，适合单一设备的精准视觉表达

1.1 什么是固定布局

固定布局也叫静态布局，是互联网早期网页最主流的版式方案。它的核心逻辑十分直白：整个网页容器设置一个固定的宽度数值，页面内所有模块、图片、文字区块全部以固定尺寸进行规划，页面整体尺寸不会随着访问设备屏幕大小发生任何改变。

在国内 PC 互联网高速发展的阶段，主流显示器分辨率相对统一，绝大多数网站都会把页面主容器设置为 960px、1000px、1200px 这几个固定尺寸。无论用户的电脑屏幕是 19 寸还是 24 寸，网页本体永远保持设定好的固定宽度。屏幕比页面更宽的时候，网页就会自动居中，页面两侧留出空白；如果用户屏幕的宽度小于网页固定宽度，浏览器底部就会自动出现横向滚动条，用户需要左右拖动滚动条，才能够浏览完整页面内容。

固定布局的设计逻辑更接近传统印刷设计，设计师在设计稿当中看到什么样式，浏览器里就呈现什么样式，像素级还原，每一个元素位置都可以精准控制。早年大量传统企业官网、门户网站，都普遍采用固定布局方案。

1.2 固定布局的核心优势

• 第一，视觉还原度极高，设计表达自由度强。设计师可以完全按照设计稿的构想，精准控制每一张图片、每一段文字、每一个按钮的位置与大小，不会出现元素自动拉伸、排版错乱的情况。对于追求严谨对称、大量复杂图文组合、精细视觉装饰的页面，固定布局可以实现非常稳定的呈现效果。

• 第二，开发成本可控，兼容性极强。固定布局诞生时间最早，几乎适配所有版本浏览器，开发逻辑简单直接，不需要处理复杂的屏幕适配逻辑。在移动端尚未普及的年代，固定布局是性价比很高的建站方案。

• 第三，页面信息秩序高度可控。页面的内容区域边界固定，文字行宽、卡片大小、图文配比全部提前锁定，不会因为屏幕变化，出现文字行过长、卡片被拉宽变形等阅读体验问题。部分重视阅读体验的资讯、文档类页面，到今天依然会采用固定布局的思路。

1.3 固定布局不可回避的短板

固定布局最大的缺陷，就是适配能力薄弱，它只为某一类特定尺寸屏幕设计，无法天然适配不同设备。

当移动互联网全面普及之后，用户访问网站的设备开始极度分化：大屏台式显示器、笔记本电脑、平板、大小尺寸各不相同的手机，屏幕尺寸跨度极大。固定布局网站在手机上打开时，页面会完整显示 PC 端全部内容，页面远远超出手机屏幕宽度，页面会强制出现横向滚动条。用户必须左右滑动屏幕，才能看清页面内容，字体被极度缩小，阅读体验非常糟糕，移动端跳出率会显著提升。

同时，即便是同样的 PC 设备，超宽屏显示器下，固定宽度的网页会被挤压在屏幕中间，两侧留下大片空白，大量屏幕空间被浪费；而小尺寸笔记本屏幕，又会触发横向滚动条，破坏浏览流畅度。

固定布局还有一个隐藏的问题：在高分辨率的大屏显示器上，如果页面容器设置的宽度偏小，整体页面会显得局促小气，很难呈现上市公司、大型企业官网所需要的大气视觉质感。

1.4 固定布局适合哪些场景，哪些情况要谨慎使用

结合雍熙大量企业数字化项目经验，固定布局并不等于已经完全淘汰，在特定场景下依旧具备实用价值，但绝对不适合作为现代企业官网的全站基础布局。

它适合的场景：

• 第一，仅面向 PC 端访问的内部管理系统、后台页面，访问设备统一，不需要适配手机；

• 第二，专题活动页、创意展示单页，目标用户主要通过电脑访问，追求像素级的创意视觉效果；

• 第三，文档阅读、报告展示类的内页，优先保证文字阅读行宽稳定。

而对于面向公网的企业官网，尤其是 B2B 上市公司官网，不建议全站采用纯固定布局。宁德时代、宇通客车这类企业，大量潜在客户会通过手机、平板访问官网，如果全站使用固定布局，移动端访问体验会出现严重缺陷，直接造成潜在客户流失。

现实项目当中，部分企业会采用折中方案：主站采用其他布局方案，部分专题详情页局部使用固定布局，兼顾创意表达和整体访问体验。

二、流式布局：以百分比为核心，实现页面的流体伸缩

2.1 什么是流式布局

流式布局，也叫流体布局，它改变了固定布局 “全部尺寸写死” 的思路。流式布局的核心，是页面主要容器、模块的宽度不再使用固定像素，而是使用百分比作为单位，页面容器会根据父级容器、浏览器可视区域的宽度自动缩放，页面各个模块之间的占比关系始终保持不变，页面整体结构顺序不会改变，就像橡皮筋一样随屏幕拉伸收缩。

举一个简单的例子，流式布局下，主内容区设置占据浏览器可视宽度 80%，侧边栏占据 20%。当浏览器窗口拉宽，主内容区和侧边栏同步变宽；浏览器窗口收窄，两者同步变窄，两者二八分的比例关系始终不变。

但流式布局并不是完全放任无限缩放，成熟的流式布局，会搭配最大宽度 max‑width、最小宽度 min‑width 进行约束，防止页面在超大屏幕上被无限制拉宽，也避免在极小屏幕下被挤压到完全无法阅读。高度维度上，流式布局大多依旧采用固定像素，因为文字、图片的高度并不适合做百分比缩放。

流式布局诞生的初衷，是为了解决 PC 时代不同尺寸电脑显示器之间的适配问题，让同一个网站可以在不同大小的电脑屏幕下正常浏览，不用出现恼人的横向滚动条。

2.2 流式布局的核心优势

• 第一，页面可以随屏幕宽度自动伸缩，消除固定布局容易出现的横向滚动条。在 PC 端不同尺寸显示器下，流式布局可以充分利用屏幕空间，不会出现大片闲置空白，页面填满可视区域，视觉舒展。

• 第二，整体布局结构稳定。无论窗口怎么缩放，各个模块的相对占比、排列顺序不会改变，设计师不需要为每一种屏幕重新设计一套页面结构，相比多套独立页面，维护成本更低。

• 第三，适合栅格化的模块化官网。以雍熙服务的大量制造类企业官网为例，产品卡片、案例列表采用流式百分比布局，卡片会随着屏幕宽度自动调整大小，在不同 PC 显示器下都可以整齐排布，适配 12 列栅格系统，实现整齐统一的页面秩序。

2.3 流式布局的短板与现实局限

流式布局的缺陷，来自它 “只改变大小，不改变结构” 这个底层特性。它只能做缩放，不能改变模块排布逻辑，当屏幕尺寸跨度特别大的时候，就会暴露出明显问题。

当屏幕特别宽大，例如超宽屏显示器，如果没有设置 max‑width 限制，页面会被无限拉宽。正文文本的行宽变得非常长，人眼阅读的时候视线来回移动，阅读效率大幅下降；多栏卡片会被拉得很宽，卡片内部图文比例失衡，视觉松散。

反过来，当屏幕尺寸持续缩小，比如来到手机尺寸，流式布局仅仅把所有栏目、卡片整体缩小，PC 端原本并排的多栏结构，到手机上依旧保持并排，所有内容被挤压在狭小屏幕当中，文字变得极小，按钮拥挤，根本无法用手指触控操作。

简单来说，流式布局可以解决 PC 内部不同显示器的适配问题，但它无法真正解决 PC 到手机这种巨大尺寸跨度的适配。流式布局不等于响应式布局，很多早期建站服务商容易混淆这两个概念，告诉客户 “百分比布局就是手机适配”，这是非常常见的认知误区。

同时，流式布局对图片素材也会带来挑战。图片跟随百分比进行拉伸，如果素材本身尺寸不足，大屏幕下图片会被放大模糊；如果图片原始尺寸很大，小屏幕下完整加载大图，会拖慢移动端页面加载速度。

2.4 流式布局的适用场景与避坑要点

流式布局最适合的场景，是PC 端优先，兼顾部分平板访问，移动端另外单独做处理的项目。在现代 B 端企业官网中，流式布局很少单独拿来做全站唯一方案，更多是作为响应式布局当中的组成部分，和弹性布局、媒体查询搭配使用。

雍熙在做宁德时代、固德威这类新能源官网的时候，PC 端的产品列表、案例卡片模块就大量借鉴流式布局的比例思维，配合 max‑width 约束最大容器宽度，保证大屏不被过度拉伸；而当页面切换到手机屏幕时，则会触发新的布局规则，直接把多栏卡片变成单列纵向排列，而不是单纯缩小尺寸，规避纯流式布局在移动端的缺陷。

如果要单独使用流式布局，必须设置合理的最大、最小宽度边界，不能放任页面无限制伸缩；同时要清醒的意识到：纯流式布局不能替代移动端适配，不要误以为使用百分比就等于做好手机网站。

三、弹性布局：面向模块的灵活排版，解决元素对齐与分配难题

3.1 什么是弹性布局

弹性布局也就是 Flex 布局，它和前面两种布局的出发点完全不一样。固定布局、流式布局，更多关注整个页面大容器的尺寸；弹性布局的核心对象是容器内部的子元素，它提供一套强大的规则，用来分配一个容器之内多个模块之间的空间、对齐方式、排列方向，能够轻松实现元素的横向排布、纵向排布、自动均分、自动挤压拉伸、对齐居中等等效果。

通俗来讲，弹性布局就像一个收纳盒，收纳盒本身可以是固定宽度，也可以是百分比宽度；盒子里面的多个小物件，就可以按照弹性布局的规则，自动均分盒子空间，或者按照各自需求分配空间，可以左对齐、居中对齐、右对齐，也可以在空间不足的时候自动压缩，甚至可以直接切换横向排列和纵向排列。

在网页出现弹性布局之前，设计师想要实现多栏对齐、卡片均分、垂直居中这类效果，需要借助浮动、定位等复杂的手段，很容易出现排版错位、高度塌陷等各种 bug。弹性布局诞生之后，模块内部排版的难度大幅降低，如今已经成为现代网页设计的基础工具。

需要重点区分：弹性布局本身不是一套完整的全站页面方案，它更多是模块级别的排版工具。弹性布局可以嵌套在固定布局的容器内，也可以嵌套在流式布局的容器内，也可以作为响应式布局的组成部分。很多人会把弹性布局等同于完整网站布局，这是一个典型误区。

以雍熙落地的科大讯飞教育官网为例，首页 “服务不同教育角色” 板块，多个人物卡片横向均匀排布，卡片高度自动统一，无论卡片内部文字长短，卡片底部对齐整齐，这个效果，就是弹性布局非常典型的落地应用上海雍熙。宇通客车官网的产品展示板块，多台客车产品卡片均匀排布，也大量运用弹性布局能力。

3.2 弹性布局的核心优势

• 第一，模块内排版能力强大，轻松解决对齐难题。网页设计当中大量高频需求：多卡片均分、元素垂直居中、导航菜单均匀分布、内容自适应高度，弹性布局都可以简洁的实现，大幅降低开发复杂度，减少错位 bug。

• 第二，具备伸缩与挤压能力。容器空间充足时，子元素可以按比例瓜分多余空间；容器空间紧张的时候，子元素可以按照预设规则自动压缩，而不是直接溢出页面，相比传统浮动布局容错性更高。

• 第三，可以灵活切换排列方向。在大屏下模块横向并排，在小屏幕条件下，可以直接切换为纵向从上到下排列，这个特性是响应式布局非常重要的技术基础。

• 第四，兼容性成熟稳定，主流浏览器全部完整支持，企业官网项目可以放心使用。

3.3 弹性布局的局限

首先，弹性布局聚焦容器内部的子元素排布，它不解决页面大容器本身如何适配不同屏幕的问题。如果外层容器是固定像素，即便内部使用弹性布局，页面整体依旧是固定布局，手机访问依然会出现横向滚动条。不能单纯依靠弹性布局，就实现全站跨设备适配。

其次，复杂多维度的页面栅格排版，弹性布局会显得力不从心，这类场景会进一步结合网格栅格体系补充能力。

另外，弹性布局对子元素内容有一定依赖，如果子元素内部的文字、图片差异过大，在极端尺寸下，部分元素的压缩拉伸效果可能不符合视觉预期，需要设计师设置最小宽度、最大宽度进行约束，不能完全放任自动伸缩。

3.4 弹性布局的实际落地场景

现代几乎所有企业官网，都会在大量模块当中使用弹性布局，不管整体页面选择哪一种基础布局，弹性布局都是模块排版的标配工具。

常见落地场景：

• 网站主导航菜单、产品卡片列表、案例展示卡片、多列服务亮点、表单内元素、页脚多栏信息布局。

雍熙在西门子 APT 低压电器官网项目当中，产品分类区域多组开关产品卡片整齐均分排布，充分发挥弹性布局优势；博世工业物联网官网，首页多组解决方案模块，同样依靠弹性布局完成模块对齐排布上海雍熙。

实操当中要记住，弹性布局是优秀的 “局部工具”，而不是完整全站布局方案，需要和外层容器布局方案组合使用。

四、响应式布局：当下企业官网主流方案，一套页面适配多终端

4.1 什么是响应式布局

响应式布局并不是一门全新独立的技术，它是一套综合的布局思想，融合前面讲到的流式布局百分比思维、弹性布局模块排版能力，再加上媒体查询断点规则共同组合而成。响应式布局的核心目标：同一套网页代码，根据用户访问设备屏幕尺寸的不同，自动切换页面的布局规则，在电脑、平板、手机不同设备上，都呈现出适配该设备的排版与交互体验。

响应式布局的关键概念就是 “断点”，设计师会根据主流设备屏幕尺寸，设置若干个关键的尺寸临界点。当浏览器屏幕宽度跨越这个临界点，页面就会启用一套全新的排版规则，不仅仅是把页面整体放大缩小，而是会改变模块的排列方式、栏目数量、元素尺寸、交互形式。

举个典型的例子，在电脑大屏断点下，产品区域是四栏卡片横向并排；当屏幕缩小到平板断点，自动切换为两栏并排；当来到手机断点，不再做多栏并排，全部卡片切换为单列从上往下纵向堆叠；同时导航由顶部完整横向菜单，变成手机常用的折叠汉堡菜单；按钮尺寸放大适配手指触控，文字字号同步调整。

这里可以清晰看到，响应式和纯流式布局的本质差别：流式布局只是把四栏卡片同步缩小，依旧维持四栏并排；响应式则会直接改变布局结构，根据设备重新组织信息。

上海雍熙服务的绝大多数上市公司官网，宁德时代、宇通客车、科大讯飞、京东方、固德威，全部采用响应式布局作为全站基础方案，一套官网同时服务 PC 办公大屏、平板、手机移动端访客，这也是当前 B 端高端官网的行业主流选择。

4.2 响应式布局的核心优势

• 第一，多终端体验统一，一套内容覆盖全部访问设备。不需要分别维护独立 PC 站、独立手机站两套网站，内容只需要维护一套，资讯、产品、案例只需要编辑一次，避免两套站点内容不同步带来的管理负担，也避免搜索引擎重复收录造成权重分散的问题。

• 第二，适配当下真实用户访问习惯。B 端客户的访问场景是高度碎片化的：采购负责人可以坐在办公室用大屏 PC 浏览官网，也会出差途中用手机打开网站查阅企业案例、产品资料。响应式布局保证无论客户使用什么设备，都可以顺畅获取信息，降低移动端跳出率，留住潜在客户。相关行业统计显示，做好响应式适配的企业官网，移动端用户留存可以得到明显提升。

• 第三，可以维持统一品牌视觉。PC、手机访问看到的是同一套设计语言，品牌的配色、视觉元素、版式风格完整延续，不会出现手机站一套设计，PC 站另外一套设计，品牌形象割裂的问题。对于上市公司而言，品牌形象的一致性，是数字化官网非常重要的诉求。

• 第四，利于搜索引擎优化。搜索引擎更加推崇响应式网站，单域名一套内容，避免 PC、手机两套站点带来的 URL 拆分、内容重复、收录混乱的问题，更有利于官网自然搜索流量的长期增长。

4.3 响应式布局不可忽视的短板

响应式布局优势突出，但它并不是完美无缺的万能方案，企业在做项目之前，需要客观认知它的代价。

• 第一，前期设计、开发、测试工作量显著提升。响应式网站不只是画一套 PC 设计稿，还需要同步定义平板、手机端每一个模块的排版逻辑。设计师需要输出多套尺寸的设计规范，开发需要针对多个断点分别调试，上线前要在大量不同尺寸设备上做兼容性测试。对比纯固定布局，响应式项目的人力投入、周期会明显增加。很多企业踩坑就在于，预算与工期按照简单固定网站来规划，却想要完整高质量响应式网站，最后落地效果大打折扣。

• 第二，页面加载的隐性矛盾。响应式网站手机端依旧加载同一套页面资源，如果不做图片的差异化处理，手机端会完整加载 PC 端的高清大图，会造成移动端页面体积偏大，弱网环境下加载缓慢。这就要求在做响应式官网时，必须配套图片的适配策略，不同设备加载对应尺寸素材，否则会损害手机端体验。雍熙在落地各大上市公司官网时，都会采用图片压缩、WebP 格式、图片条件加载等策略，平衡视觉质感和加载速度，规避这个隐患。

• 第三，复杂业务场景会出现设计妥协。对于业务极度复杂，PC 端页面信息量极大的官网，要把海量信息全部收纳进手机端的有限屏幕，需要做大量的信息取舍，部分 PC 端丰富的展示形式，在移动端需要做简化处理。如果企业要求 PC 端全部功能、全部模块，一丝不改完整照搬到手机端，响应式布局很难做到两全其美，需要前期就做好信息优先级梳理。

• 第四，断点的选择需要专业判断。断点不是简单按照设备型号划分，现在设备尺寸五花八门，手机、平板屏幕尺寸越来越多。如果断点设置不合理，在部分中间尺寸屏幕，页面会出现过渡状态的排版瑕疵，需要专业团队做多维度测试。

4.4 响应式布局的适用场景，以及什么情况下不优先选响应式

响应式布局是当前公网企业官网的首选方案，尤其是面向 B 端客户的集团官网、上市公司官网，访问设备混杂，客户会通过电脑、手机多渠道访问，例如宁德时代、宇通客车这类企业，响应式布局是最优解。

但响应式也不是所有项目的万能钥匙。如果项目是仅面向内部办公系统，访问设备全部是统一规格 PC 电脑，几乎没有手机访问场景，那么优先选择固定布局搭配弹性模块，开发维护成本更低，不必强行做响应式。

还有一种场景，企业业务极其复杂，PC 端功能模块极其庞大，同时移动端需要一套完全不同的信息架构、完全不同交互逻辑，且预算充足，这种情况下可以评估独立移动端站点方案，但要承担两套系统维护成本与 SEO 方面的风险。

五、四种基础布局对比，企业建站该如何选型

把固定布局、流式布局、弹性布局、响应式布局放在一起对比，我们可以得出清晰的选型逻辑。

• 固定布局，像素级精准，但是跨设备适配能力弱，适合设备可控的内部系统、创意专题页，不建议作为公网企业官网全站唯一方案。

• 流式布局，以百分比实现 PC 不同显示器的伸缩，但是无法改变模块排布结构，不能解决手机适配，更多作为响应式的组成部件。

• 弹性布局，强大的模块级排版工具，负责容器内部元素的分配、对齐，几乎所有现代网站都会大量使用，但它不是完整全站布局方案，需要和外层容器方案配合。

• 响应式布局，融合上面三者的优势，依靠断点实现不同设备下布局结构切换，是公网企业官网主流方案，但要接受更高的设计开发测试成本，做好图片、信息优先级的配套规划。

在雍熙过往的项目实践当中，几乎不存在一个大型企业官网，只纯粹使用其中某一种布局。真实的商业项目，往往是以响应式布局作为全站底层框架，在框架当中大量使用弹性布局处理各类卡片、导航、页脚模块；在 PC 端的部分列表板块，吸收流式布局百分比的思路，同时增加最大宽度约束；部分专题详情页面，局部使用固定布局保障特定创意效果。多种布局思想互相组合，扬长避短，才是商业官网真实的落地形态。

很多企业负责人容易陷入两个极端误区。第一个误区，过度迷信 “新技术”，认为越新潮布局就越好，不顾自己业务访问场景，盲目追求响应式，但是不给足对应的工期与资源，最终落地效果差强人意。第二个误区，完全忽视多终端访问现实，依旧选择老旧纯固定布局，节省短期成本，却牺牲大量手机端访客的浏览体验。

布局选型的第一准则，永远是先梳理业务的真实访问场景，再选择布局方案。需要思考：我们的访客主要用什么设备访问网站？手机访问占比大概是多少？网站业务复杂度有多高？后期内容维护希望维护一套还是多套？预算与周期可以支撑到什么程度？把这些前置问题梳理清楚，布局选型就不会出现根本性错误。

同时，布局选型只是基础，无论选择哪一种布局，都不能忽略网页版式的通用底层原则：对齐、层级、留白。哪怕是采用先进的响应式布局，如果信息层级混乱，页面塞满元素完全没有留白，页面依旧会显得廉价杂乱。宁德时代官网首屏 3D 工厂建模页面，宇通客车官网的巴士实景首屏，科大讯飞教育官网的人物角色板块，除了布局方案合理之外，都充分运用留白区分模块，建立清晰的视觉层级，才最终塑造出上市公司官网的高级质感。布局是骨架，而对齐、层级、留白，就是骨架之上的肌肉，二者缺一不可。