同一个页面在电脑上看着正常，到了手机上就变形——这是H5开发里最常见的问题。不是代码写错了，是缺少适配逻辑。这篇文章拆解响应式布局和弹性盒模型这两个核心工具，帮你建立一套让页面在不同屏幕上都保持完整性的适配方法。

弹性盒模型的本质是“空间分配”。 传统的盒模型是固定的：你设定宽度，元素就占据那么多宽度。但移动端屏幕尺寸差异很大，固定宽度会导致页面在不同设备上出现横向滚动或大面积空白。弹性盒模型把“宽度”变成了“份额”，你告诉每个元素应该占多少比例，浏览器根据剩余空间自动分配。控制弹性盒模型的五个关键属性：flex-direction决定排列方向；justify-content控制主轴上的对齐方式；align-items控制交叉轴上的对齐；flex-wrap控制是否换行；flex属性决定每个元素分配剩余空间的比例。掌握了这五个属性，大部分单行和多行的排布问题都能在框架内解决。

响应式设计的核心是“断点”。 页面在不同屏幕宽度下，布局、字体、间距都应该有对应的变化。断点就是在特定宽度下触发布局调整的临界点。常规断点通常设置在768px（平板竖屏）、1024px（平板横屏或小屏笔记本）和1200px（桌面端），但更实际的做法是根据你的页面内容来决定断点位置——当布局开始挤压时，就在那个宽度设置断点。每个断点内重新定义模块的排列方式、文字大小和间距，让页面在不同设备上保持一致的阅读体验。媒体查询是实现断点的技术手段，通过它可以在不同屏幕宽度下加载不同的样式规则。

适配顺序比适配技术更重要。 很多人习惯先做PC版本，再“向下适配”手机端。但移动端和PC端的交互方式不同，先从手机端开始设计能让内容优先级更清晰，避免在大屏设计完成后适配小屏时被迫压缩内容。先确定在手机屏幕上的结构和样式，再逐步向大屏幕扩展。

适配的核心不是“让页面看起来一样”，而是“让页面在不同屏幕上都好用”。掌握弹性盒模型和响应式设计的基本方法，就能让页面在不同设备上保持清晰的表达。