position: fixed 是全屏模态框的起点，因其脱离文档流、相对视口定位，可实现遮罩满屏与内容居中；需设 html/body height: 100% 以确保 top/bottom: 0 生效，避免 vh 在 ios safari 中因地址栏变化导致跳变。
为什么 position: fixed 是全屏模态框的起点
position: fixed 让元素脱离文档流、相对于视口定位，这是实现“遮罩盖满整个屏幕+内容居中”的基础。用 absolute 容易受父容器限制，而 sticky 或 relative 根本不满足全屏需求。
- 必须给
html和body设置height: 100%，否则fixed元素的top: 0; bottom: 0可能无法撑满真实视口高度（尤其在滚动长页时） - 不要依赖
vh单位做高度主体——iOS Safari 在地址栏收放时会触发vh值跳变，导致模态框突然缩/胀 - 遮罩层（overlay）推荐用
background-color: rgba(0,0,0,0.9)而非opacity，避免内部图片也被透明化
如何让图片在模态框里真正“沉浸”且不失真
关键不是拉伸填满，而是保留原始宽高比、居中显示、允许缩放后平移——这需要组合使用 object-fit、transform 和容器约束。
- 图片容器（如
.modal-image）设为width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; -
<img>元素本身设置max-width: 100vw; max-height: 100vh; object-fit: contain;—— 这样既能等比缩放到可视区域内，又不会裁切 - 如果要做点击放大效果，不要直接改
width/height，而是用transform: scale()配合transform-origin: center，避免重排版 - 注意：iOS 上
transform: scale()在fixed元素中可能触发渲染异常，建议加will-change: transform;或用translateZ(0)强制 GPU 加速
关闭按钮和 ESC 键响应必须绕开焦点陷阱
用户点空白处或按 ESC 关闭模态框很常见，但容易忽略键盘可访问性与焦点管理。
- 关闭按钮需有明确
role="button"和aria-label="Close gallery"，不能只靠视觉图标 - 监听
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); })，注意判断模态框是否 visible 再执行 - 模态框打开时，把焦点强制移到关闭按钮上（
closeBtn.focus()），并用inert属性或aria-hidden="true"隐藏背景内容（仅对屏幕阅读器生效） - 点击遮罩层关闭时，确保
e.target === overlayEl，而不是子元素（比如图片），否则点图就关了——这是高频误操作点
移动端双指缩放与拖拽的 CSS 边界控制
纯 CSS 无法实现缩放拖拽，但可以为 JS 行为提供稳定布局基底，避免缩放后内容溢出或错位。
- 给模态框最外层加
touch-action: none;，把触摸控制权交给 JS；否则 iOS 默认会拦截双指手势 - 图片容器设
overflow: hidden;，防止缩放后边缘露出白边或滚动条 - 使用
contain: layout paint size;提升滚动/缩放性能（Chrome/Edge 支持良好，Safari 有限） - 不要给
body设overflow: hidden来防滚动——这会导致 iOS 页面顶部回弹失效，改用overscroll-behavior: none;更稳妥
实际体验中最容易被忽略的是：图片加载完成前就触发缩放逻辑，导致尺寸计算错误；以及未监听 resize 事件，在横竖屏切换时未重置缩放状态。这些都得靠 JS 配合，CSS 只负责守住布局底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
