流式布局核心是百分比与视口控制，必须设置<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端仍按桌面宽度渲染；应优先使用flex替代float，配合max-width: 100%约束图片、word-break: break-word防文本溢出，字体推荐rem/em/vw；邮件模板需用表格兼容旧引擎，不可直接套用Web方案。
流式布局的核心是百分比 + 视口控制
流式布局不是“加个 @media 就算响应式”，它本质是让容器和子元素的尺寸始终相对于父级或视口动态计算。没设 viewport 元标签，哪怕所有宽度都用百分比，移动端也会以桌面宽度渲染并缩放，导致文字小、点击区难触达。
必须在 <head> 里写死这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
否则后续所有流式逻辑都会失效。常见错误是只在 PC 端测试，或用 Chrome 模拟器但没刷新缓存——这时候你看到的“正常”只是浏览器强行缩放的结果，实际用户拿到的是模糊小字。
用 flex 替代 float 是现代流式布局的底线
float 布局虽然能实现左右分栏，但会脱离文档流、引发高度坍塌、需要额外清除浮动，对响应式来说是负优化。而 flex 天然支持伸缩、换行、对齐，且一行 CSS 就能覆盖多端行为。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 主容器加
display: flex和flex-wrap: wrap，子项用flex: 1 1 300px（表示基础宽度 300px，可伸可缩） - 小屏下直接用媒体查询改
flex-direction: column或设flex-basis: 100%，不用删 DOM、不重写结构 - 避免给
flex子项设固定width，否则会压制弹性行为；如果必须限定最小宽度，用min-width更安全
图片和文字溢出是流式布局最常被忽略的断裂点
即使容器用了百分比，<img> 默认按原始尺寸渲染，<p> 里的长单词或 URL 也可能撑破父容器。这不是布局写错了，是媒体和文本没做约束。
- 全局加这条规则：
img { max-width: 100%; height: auto; }，强制图片随父容器缩放 - 防长单词溢出：
p, li { word-break: break-word; }，尤其对邮箱地址、API 路径这类内容有效 - 字体大小别全用
px，标题用rem，正文用em或vw（如font-size: 4vw），让字号随视口变化
邮件模板里的流式布局要倒着想
Cerberus 这类 HTML 邮件模板用的不是现代 CSS，而是“1999 年式”方案：全 <table>、内联 style、width="60%" 属性。因为 Outlook、旧版 Gmail 根本不认 flex 或媒体查询。
- 如果你在写营销邮件，
cerberus-fluid.html是起点——它靠表格width百分比收缩，不重排，兼容性最强 - 想加堆叠效果又不敢用媒体查询？选
cerberus-hybrid.html，它用min-width/max-width+ 表格自动换行，绕过客户端限制 - 千万别把 Web 页面那套
flex + @media直接抄进邮件 HTML，发出去大概率在 Outlook 里变成单列错位或样式全丢
流式布局的复杂点不在怎么写，而在“为谁写”——Web 页面面向现代浏览器，邮件面向一堆老古董渲染引擎，两套约束条件不能混用。
