用HTML+CSS制作稳定超市促销海报需锁定viewport为width=375，全量使用px单位，背景图内联base64，商品区块采用绝对定位，禁用transform缩放与动画以保障导出长图清晰。
直接用 HTML + CSS 做超市促销海报页面，不是做响应式电商站，而是「一张能发微信群、能投屏、能导出长图」的 H5 海报——关键不在功能多，而在视觉稳、加载快、适配真机不崩。
用 viewport 锁死物理像素比，别信“自动适配”
很多海报在 iPhone 上文字糊、按钮错位，根源是没强制锁定缩放。iOS Safari 默认会把 375px 宽的页面缩放到“看起来像 414px”，导致 CSS 像素和设备像素不一致。
必须加这行 meta（放在 最前面）：
<meta name="viewport" content="width=375, initial-scale=1, maximum-scale=1, user-scalable=no">
说明：
- width=375 对应 iPhone SE / 8 的逻辑宽度，是微信 WebView 最稳定的基础画布
- 不要用 width=device-width，它会让安卓千元机拉伸变形
- user-scalable=no 防止用户双指放大后切图错乱
- 所有尺寸（字体、边距、图片宽高）统一用 px，别用 rem 或 %
background-image 加载失败时，用内联 base64 保底
海报主视觉图如果走 CDN 或外链，在弱网或微信禁外部图片时直接白屏。不能只靠 onerror 换图——H5 海报没 JS 执行环境保障。
正确做法：把核心背景图转成 base64 内联进 CSS：
body {<br> background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");<br> background-size: 100% auto;<br> background-repeat: no-repeat;<br>}
注意：
- 图片控制在 200KB 以内，过大会拖慢首屏
- 用在线工具（如 base64-image.de）转，别手写
- 商品图标、折扣标签等小图也建议 base64，避免多个请求失败叠加
商品列表用绝对定位 + 固定 top/left，别碰 flex 或 grid
促销海报里的商品区块（比如“满 99 减 30”“第二件半价”）位置必须像素级精准——设计稿上写着 top: 128px，那就得是 128px，不能因为某台手机 font-size 变了就偏移。
推荐结构：
<div class="item" style="position: absolute; top: 128px; left: 32px; width: 240px;"> <br> @@##@@<br><div class="price">¥29.9</div> <br> </div>
原因：
- flex 在低端安卓 WebView（如 X5 内核 6.8）里对 align-items 支持不全
- grid 在 iOS 12 以下完全不支持
- 绝对定位 + px 值，是唯一能在所有微信版本里复现设计稿的方案
- 所有 top/left 值，严格按设计稿标注填写，别换算
导出长图前，先关掉 transform: scale() 和动画
用微信“长按保存图片”或第三方截图工具（如 SnapTool）时，如果用了 transform: scale(0.9) 做全局缩放，导出图会模糊；带 transition 的入场动画则可能截到中间帧。
实操建议：
- 全局不要用 transform 调整大小，缩放交给设计稿本身（比如直接出 375×1200px 的图）
- 动画仅用于提升体验，加 pointer-events: none 防误触，但导出前手动删掉 @keyframes 块或注释掉 animation 声明
- 导出前检查是否含 filter: blur() 或 box-shadow，这些在截图时易失真，改用纯色描边或 PNG 透明阴影图替代
最麻烦的从来不是写多少代码，而是设计稿里一个“轻微倾斜的优惠角标”——你得决定是用 transform: rotate(-8deg) 还是让设计师重出一张带旋转的 PNG。后者更稳，前者省流量但兼容性要一条条测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
