必须用JS实现放大镜效果：容器设position: relative，镜片用absolute定位；坐标用getBoundingClientRect()计算并实时更新；background-position需按缩放比反向换算并居中；移动端需适配touch事件并防误触。
纯 CSS 无法实现“点击后持续局部放大”，更无法让放大镜跟随鼠标实时锚定位置；:hover 在移动端基本失效，:checked hack 只能控制显隐、无法绑定动态坐标——必须用 JS 计算坐标、映射 background-position、驱动 position: absolute 镜片移动。
容器必须设 position: relative，否则镜片飘到左上角
镜片元素用 position: absolute，但它需要一个已定位的祖先作为参考系。图片本身是替换元素，position: relative 对 <img alt="如何在CSS中利用定位实现商品详情页的图片放大镜" > 无效；真正要加的是它的父容器（比如 <div class="image-container">）。<ul>
<li>常见错误：只给 <code><img alt="如何在CSS中利用定位实现商品详情页的图片放大镜" > 加 position: relative，结果镜片始终相对于 定位
.gallery-item）都得单独设 position: relative
overflow: hidden，但宽高没预留镜片移动余量，镜片会被裁掉——检查是否留够至少 lensWidth / 2 的边距
getBoundingClientRect() 是唯一靠谱的坐标来源
别用 event.offsetX/offsetY：它们在容器有 border、padding 或被 transform: scale() 缩放过时会严重失准。必须用 container.getBoundingClientRect() 获取容器视口位置，再扣减盒模型干扰。
- 监听事件的目标必须是容器（
.image-container），不是<img alt="如何在CSS中利用定位实现商品详情页的图片放大镜" > - 每次
mousemove都要重新调用getBoundingClientRect()，不能缓存（滚动或缩放会改变结果） - 计算镜片 left/top 时，记得减去
lensWidth / 2和lensHeight / 2，实现中心对齐
background-position 映射必须按缩放比反向换算
放大镜显示的是大图局部，而大图通常作为 background-image 设置在另一个容器上。镜片中心点坐标（相对于小图容器）乘以缩放比后，要取负值，并补偿大图容器尺寸的一半，才能让背景图“拉”出对应区域。
立即学习“前端免费学习笔记（深入）”；
- 缩放比 = 大图自然尺寸 / 小图容器尺寸（例如 900px / 300px = 3）
- 错误写法：
backgroundPosition = `${x * scale}px ${y * scale}px`（方向反了，也没居中） - 正确写法：
backgroundPosition = `${-(x * scale - bigContainerWidth / 2)}px ${-(y * scale - bigContainerHeight / 2)}px` - 如果小图容器有
border或padding，x/y必须先扣除，否则 background 偏移永远偏右下
移动端适配不能只靠 touchstart/touchmove
触摸事件默认有 300ms 延迟，且 touchstart 的 touches[0] 坐标需手动映射到容器内，不能直接复用 PC 的 clientX/clientY 逻辑。
- 必须用
event.touches[0].clientX替代event.clientX - 为防误触，建议在
touchstart后立即preventDefault()，并禁用双击缩放（<meta name="viewport" content="user-scalable=no">） - 旧版 Safari（≤15.6）不支持
clip-path: circle(50px at 50% 50%)中的at偏移，降级用border-radius: 50%+overflow: hidden
最常被忽略的是：原图分辨率必须达到显示区域的 2 倍以上，否则放大后全是模糊锯齿；background-size 别用 100% 100%，它会强制拉伸失真——该用 cover 或明确像素值。
