全屏搜索框需用position: fixed; inset: 0挂载body下，flex居中搜索框，width: 100%+box-sizing: border-box防溢出，scroll-margin-bottom: 60px防键盘遮挡，背景用rgba()而非opacity，pointer-events分层控制。
移动端搜索框全屏展开不是简单设 width: 100vw + height: 100vh 就能稳，关键在键盘弹出、横竖屏切换、iOS Safari 视口跳变这三类场景下不被顶飞、不遮挡输入光标、不触发横向滚动。
全屏遮罩层必须用 position: fixed + inset: 0
用 position: absolute 或 100vh 都会出问题：100vh 在 iOS Safari 地址栏收放时跳变；absolute 依赖父容器高度，一旦父级有 transform 或 filter，遮罩就截断。真正可靠的是：
-
position: fixed; inset: 0;（等价于top: 0; right: 0; bottom: 0; left: 0;），它不依赖视口单位，也不受祖先样式干扰 - 遮罩元素必须直接挂载到
下，别塞进某个.modal容器里，否则会被外层transform: translateZ(0)截断 - 加
pointer-events: none;到遮罩自身，但搜索框及内部、必须显式设pointer-events: auto;，否则点击穿透到底层
搜索框居中必须靠 display: flex，别碰 top/transform
top: 50%; transform: translateY(-50%) 看似简单，但在字体渲染、DPI 缩放、iOS 地址栏弹出时高度计算浮动，极易偏移。正确做法是让遮罩层自己承担布局责任：
- 遮罩层设
display: flex; align-items: center; justify-content: center; - 搜索框本身用
max-width: 90vw控制宽度上限，避免小屏拉伸变形；别设width: 100%，否则在 flex 容器里可能撑满全屏 - 若需适配键盘弹出，加
body { overscroll-behavior: contain; }阻止底层滚动
输入框宽度要随容器缩放，且防键盘顶起后不可见
移动端输入框“自适应”不是指内容驱动宽度，而是确保它在键盘弹出后仍可见、可点、不溢出：
- 给
加width: 100%; box-sizing: border-box;，并确保父容器没设min-width或white-space: nowrap锁死收缩 - 输入框必须在**可滚动容器内**才生效
scroll-margin-bottom：父级设overflow-y: auto+min-height: 100dvh（降级写100vh） -
scroll-margin-bottom: 60px是目前最轻量方案，但它要求输入框不能脱离文档流——删掉position: fixed、transform、will-change，否则坐标错乱且无报错 - Android 微信不支持
scroll-margin-bottom，必须 fallback：监听focusin后用setTimeout(() => el.scrollIntoView({ block: 'nearest', behavior: 'smooth' }), 300)
背景透明度必须用 rgba()，别碰 opacity
opacity: 0.6 会让整个遮罩及其子元素（包括文字、图标）一起发虚，iOS Safari 渲染锯齿明显，部分安卓 WebView 还会导致点击区域失效。干净做法只控制背景色透明度：
- 推荐写法：
background-color: rgba(0, 0, 0, 0.7);（深色遮罩）或rgba(255, 255, 255, 0.85);（浅色） - 过渡动画用
background-color变化，而不是opacity，更稳定也更省性能 - 移动端 iOS Safari 有延迟点击机制，若遮罩是
opacity: 0或visibility: hidden，根本拦不住点击，必须用display: none或真实 DOM 移除
最容易被忽略的不是怎么写 inset: 0，而是把「遮罩层」和「搜索框本体」混为一谈——前者负责覆盖与交互拦截，后者才是真正的输入载体，两者的定位逻辑、尺寸约束、事件处理必须严格分离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
