全屏 hero 区域的核心是确保 height: 100vh 真正生效，需重置 html/body 边距、避免父容器塌陷、慎用定位干扰，并根据内容是否超屏选择 height/min-height，配合 flex 垂直居中与 background-size: cover/contain 控制背景，兼顾移动端 vh 偏差及多端测试。
全屏 hero 区域的核心不是“撑满屏幕”，而是让 height: 100vh 真正生效且不被干扰——多数失败都源于父容器高度塌陷、滚动条侵占或移动端缩放导致的 vh 偏移。
为什么 height: 100vh 没用？
常见现象：元素写了 height: 100vh，但实际高度不足一屏，或下方留白、滚动条意外出现。
- 根元素
html和body默认有margin（尤其旧版 Safari），必须重置：html, body { margin: 0; padding: 0; } - 父容器未设置高度时，
100vh在某些嵌套结构里会失效（比如放在div内但该div无高度约束）；最稳做法是直接作用于顶层容器（如<section class="hero"></section>）并确保它没有非static定位的祖先干扰 - 移动端 Safari 中，地址栏收起/展开会动态改变
vh值（iOS 15+ 仍存在），此时100vh可能比可视区高或低几十像素
用 min-height: 100vh 还是 height: 100vh？
取决于内容是否可能超出一屏。若 hero 内含大标题+按钮+渐变背景，且明确只占一屏，用 height: 100vh 更精准；但只要内容有响应式文字缩放、多行副标或预留扩展空间，一律改用 min-height: 100vh。
-
height: 100vh：严格锁定，内容超长会溢出被裁切（除非加overflow: auto） -
min-height: 100vh：更安全，内容增长时自动撑高，不会破坏布局流 - 补充技巧：为防 iOS
vh动态偏差，可加 JS 补偿（仅必要时）：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);然后在 CSS 中用height: calc(var(--vh, 1vh) * 100)
背景图铺满且居中，但不拉伸变形
关键在 background-size 和 background-position 的组合，而非盲目设 cover。
- 首选
background-size: cover：等比缩放填满，可能裁边，适合摄影类 banner - 若需完整显示图片（如 logo 或图标型设计），改用
background-size: contain，但要配合background-repeat: no-repeat和background-position: center - 避免用
background-size: 100% 100%：强制拉伸，失真严重 - 性能提示：大图建议用
<picture></picture>响应式加载，CSS 背景图无法做到 srcset 级别适配
文字垂直居中别靠 line-height 或 padding
这两种方法在字体大小变化、多行文本、不同浏览器行高计算差异下极易错位。
- 现代标准解法：Flexbox —— 给 hero 容器设
display: flex; flex-direction: column; justify-content: center; align-items: center; - 若需兼容 IE10+，可用绝对定位 +
transform: translate(-50%, -50%)，但必须确保父容器position: relative - 注意：
justify-content: center对单行文本有效，但对多段落或复杂结构，建议用margin: auto配合固定宽高块级元素更可控
真正难的不是写满一屏，而是当用户缩放页面、切换横竖屏、或在微信内置浏览器里打开时，hero 依然稳定占据首屏且文字不溢出。这些边界情况往往只在上线后暴露，所以测试阶段至少要在 Chrome DevTools 的 device toolbar 里轮一遍 iPhone SE / iPad / Pixel 5，再手动拖动缩放滑块试三次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
