响应式 hero 区块应避免固定高度 h-96，改用 min-h-[50vh] + max-h-[70vh]；背景图需 bg-center object-cover + 降级底色；文字用 flex 居中+顶部留白，路径须放 public/ 下或用内联 style。
用 h-96 和 w-full 做 Hero 区块，高度在小屏上会塌掉
直接写 h-96 w-full bg-cover 看似简单，但 h-96 是固定 24rem（384px），手机竖屏下内容常被截断或留大片空白。响应式 Hero 的核心不是“填满视口”，而是“在不同设备上保持可读性+视觉重心不偏移”。
-
h-96在移动端往往过高，建议改用min-h-screen或min-h-[50vh]控制最小高度，再配合max-h-[70vh]防止桌面端撑太满 - 背景图必须加
bg-center+object-cover（不是bg-cover—— 后者是背景图属性，前者才是 Tailwind 的 object-fit 工具类） - 如果图本身宽高比失衡，
object-center比默认的object-top更安全，避免人脸被切掉
背景图加载失败时 Hero 区块直接变白底
Tailwind 不处理图片加载逻辑，bg-[url(...)] 失败后不会 fallback，用户看到纯色块+文字悬浮在白底上，体验断裂。
- 务必为
div设置一个与图片主色调接近的bg-gray-100或bg-gradient-to-r from-blue-50 to-indigo-50作为降级底色 - 不要依赖
bg-blend-multiply等混合模式做文字可读性保障——它在图片加载失败时会让文字彻底不可读 - 如需更稳的 fallback，可用内联
style="background-image: url(...) !important;"配合 JS 监听error事件动态换图，但多数场景用纯色底+足够对比度的文字就够了
文字层在 iPad 横屏下错位、遮挡关键图像区域
用 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 居中，看似通用，但在横屏 iPad（1024×768）下，top-1/2 会把文字压到图中间，可能盖住人脸或产品主体。
- 改用
flex items-center justify-center+pt-16 md:pt-24，让文字从顶部有呼吸感，而非死盯中心点 - 关键文案优先放
md:text-left+md:pl-12，避开图像焦点区；副标题用text-sm opacity-80降低视觉权重 - 避免对
h-96做媒体查询微调（比如md:h-[40vh]），容易和父容器 margin/padding 冲突，统一用min-h-+max-h-组合更可控
使用 bg-[url(...)] 时路径不生效或报 404
Tailwind 默认不扫描字符串里的 URL，bg-[url('/img/hero.jpg')] 在生产环境极大概率失效，尤其用 Vite 或 Next.js 时路径解析规则不同。
- 静态资源必须放在
public/下，然后写bg-[url('/hero.jpg')]（开头带/） - 如果图在
src/assets/，别硬塞进bg-[...]，改用style：style={{ backgroundImage: `url(${heroImg})` }}，让打包器正常处理 - Vite 用户注意：
bg-[url('@/assets/hero.jpg')]❌ 不支持别名；bg-[url('./assets/hero.jpg')]✅ 但只在 CSS 文件里有效，JSX 中无效
响应式 Hero 最难的不是写多少 class，而是判断哪部分该随屏幕缩放、哪部分该锁定视觉节奏。背景图高度、文字锚点、资源路径这三处，任一出错都会让整个区块失去传达力——尤其当设计稿只给了桌面版尺寸时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
