HTML海报排版图文布局实用方法

堆出形，或者依赖可视化编辑器拖拽，结果一到高宽比变化、字体渲染差异、甚至打印导出的时候，版面直接崩给你看。

下面这几点，是真正经过实战检验的方法，你值得花点时间琢磨一下。

用 flex + aspect-ratio 做固定比例海报容器

海报最怕什么？拉伸变形，文字溢出——这两个问题一出现，设计稿直接报废。现代方案很简单：让容器自己“记住”比例，而不是硬生生地去设width和height。

• aspect-ratio: 3 / 4（竖版）或者 aspect-ratio: 16 / 9（横版），直接告诉浏览器宽高比，它会自动帮你算高度。
• 配合 max-width: 100vw 和 max-height: 100vh，确保容器再怎么也不超出视口范围。
• 一定避免用 height: 100vh——这东西会忽略手机地址栏、工具栏这些实际可用的高度，结果就是底部往往被切掉一截。
• 举个例子：

  .poster { display: flex; flex-direction: column; aspect-ratio: 3 / 4; max-width: 100vw; margin: auto; }

图文分层：用 z-index + position: relative 控制视觉顺序

海报里向来是“兵多将广”：背景图、蒙版、主标题、副文案、二维码……这些元素堆在一起，DOM 顺序不等于渲染顺序，这是个常见陷阱。

• 记住，所有需要分层的子元素，都必须设 position: relative 或 absolute，否则 z-index 根本不起作用。
• 背景图建议用
  的 background-image，而不是用 。理由很简单：前者更容易控制 background-size: cover 和 background-position，效果稳得很。
• 像二维码这种功能性小图，用 position: absolute; bottom: 24px; right: 24px; 固定锚点，比用 float 或 flex 更可靠，位置精准不易跑偏。
• 文字层务必加 text-shadow 或者垫一层半透明白色蒙版，否则背景稍微复杂一点，文字就糊成一团，根本看不清。

响应式断点只按设备用途分，不按分辨率数字分

海报不是正文网页，没必要为“320px / 375px / 414px”这种分辨率数字没完没了地写媒体查询。关键看使用场景：

• 手机竖屏预览 → 用 @media (max-width: 480px) 缩小字体、增大行高、甚至直接隐藏次要信息。
• 投屏展示（比如会议大屏）→ 用 @media (min-width: 1920px) 把 font-size 提到 48px 起，字重也加粗，保证远处看得清。
• 导出 PDF 或截图 → 加 @media print，同时禁用 background-image（多数浏览器不打印背景），改用纯色块加文字说明。
• 至于 @media (min-resolution: 2dppx)？不建议写。海报内容不依赖像素级锐度，而且这个规则在 Safari 里的支持不太稳定。

字体与行高必须手动锁定，不能依赖系统默认

海报对文字的可读性极其敏感。像 line-height: 1.4 这种相对值，在不同字号下表现差异巨大，必须手动锁死。

• 主标题统一用 line-height: 1.1（紧贴但不粘连），字号大于等于 42px 时启用。
• 正文字体大小用 rem，但行高建议改用 em 或者无单位数值（比如 line-height: 1.35），确保缩放时比例保持稳定。
• 中文字体栈必须显式声明：比如 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;。否则 fallback 到宋体，字重会突然跳变，极其难看。
• 还有一点：禁止用 vertical-align: middle 去对齐多行文字。它只对单行内联元素有效，海报里那么多行段落，请用 display: flex; align-items: center; 包裹容器来操作。

说到底，真正难的从来不是把图和字摆上去。而是让它们在 iPhone 截图、Chrome 打印、PPT 插入、甚至微信转发预览这些五花八门的场景里，都能保持你最初的设计意图。这要求每一处 margin、padding、line-height 都有它明确的目的，而不是“看起来差不多就行”。