靠 position: fixed + z-index 拉满 + transform 动画实现：固定定位脱离文档流，z-index ≥ 9999 确保层级最高，用 transform: scale() 替代宽高变化以提升性能，并配合 opacity 过渡，初始设 opacity: 0 和 pointer-events: none 保障动画可触发。
怎么用 CSS 实现搜索框全屏覆盖展开
直接给结论：靠 position: fixed + z-index 拉满 + 动画控制宽高，不是靠 fullscreen API。HTML 本身没有“搜索全屏”语义，这是纯样式+交互行为，浏览器不会自动帮你铺满整个视口。
常见错误是把搜索框塞进 <main></main> 或 <section></section> 里再强行加 width: 100vw; height: 100vh，结果被父容器的 overflow: hidden 截断，或被 sticky header 遮住。
- 必须脱离文档流：用
position: fixed; top: 0; left: 0; - 层级要压过所有内容：
z-index: 9999（别用 1000，现在很多 UI 库默认就 1000+） - 初始状态建议设为
opacity: 0; pointer-events: none;，而不是display: none——否则 CSS 过渡动画会失效 - 输入框聚焦后，用 JS 切换 class 触发动画，比如
.search-overlay--open
为什么 input:focus-within 不适合做全屏触发
因为 :focus-within 只能作用于父容器，而全屏覆盖层通常不在搜索按钮的 DOM 父级路径里。你点一个顶部的放大镜图标，想让底部弹出全屏搜索框——这两个元素大概率不构成父子关系，CSS 伪类完全无能为力。
真实项目中几乎都得靠 JS 绑定事件：
立即学习“前端免费学习笔记（深入）”；
- 监听图标点击，添加
is-searching类到，然后用body.is-searching .search-overlay控制显示 - 同时调用
input.focus()，确保键盘唤起（移动端尤其关键） - 记得加
ESC键监听：document.addEventListener('keydown', e => e.key === 'Escape' && closeSearch())
transform: scale() 和 width/height 动画哪个更流畅
选 transform。直接改 width 或 height 会触发 layout，尤其在低端安卓机上卡顿明显；transform: scale(0) → scale(1) 只走合成器线程，性能好得多。
但注意：scale 是以元素自身中心为原点缩放，如果想从左上角展开，得配合 transform-origin: top left；如果想从图标位置“炸开”，就得用 JS 动态计算坐标并设置 transform-origin，复杂度陡增——大多数产品没必要，统一用 top left 就够用。
- 推荐动画组合：
transform: scale(0.95); opacity: 0;→transform: scale(1); opacity: 1; - 过渡属性写全：
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s - 别只写
transition: all，会意外过渡其他属性（比如 color），影响可维护性
移动端适配最容易漏的三件事
PC 上跑得飞起，一上手机就错位、输不了字、关不掉——八成栽在这三个点上：
-
viewportmeta 缺失或写错：<meta name="viewport" content="width=device-width, initial-scale=1">必须有，且不能加user-scalable=no，否则 iOS Safari 会禁掉缩放，导致 input 聚焦时页面乱跳 - 软键盘顶起页面后，
100vh在部分安卓机型上会按“原始视口”计算，导致遮罩层高度不够——稳妥做法是用 JS 读window.innerHeight动态设min-height - 点击遮罩层背景关闭时，iOS Safari 有 300ms 延迟，必须给遮罩层加
cursor: pointer和touch-action: manipulation来启用快速点击
全屏搜索看着简单，真正上线前至少要在 iOS 16+、Android Chrome 115+、Samsung Internet 测三遍，尤其是输入法切换和横竖屏翻转场景——这些地方没日志、不报错，但用户就是觉得“卡”或者“点不中”。
