响应式焦点图需容器、图片、动画三者协同：用aspect-ratio锁定高宽比，object-fit与object-position精准裁剪，transform+will-change实现顺滑切换，配合tabindex、touch-action等保障可访问性。
响应式焦点图不是靠“多写几遍 responsive”实现的，关键在于容器、图片、动画三者在不同视口下的协同行为是否可控。硬套 width: 100% 或只加 media query 很容易导致图片拉伸、切换错位、触摸失效。
用 aspect-ratio 锁定容器高宽比，避免 JS 计算高度
传统做法靠 JS 监听 resize 动态设 height，既卡顿又难维护。现代方案直接用 CSS 原生 aspect-ratio：
-
aspect-ratio: 16 / 9比写死height: 400px更可靠，缩放时比例恒定 - 搭配
max-width和width: 100%，自然适配移动端窄屏 - 注意兼容性：Safari 15.4+、Chrome 88+ 支持；旧版需回退到
padding-top技巧（如padding-top: 56.25%）
图片用 object-fit: cover + object-position 控制裁剪焦点
轮播图常因图片原始尺寸不一，在小屏上被错误裁掉人脸或标题。仅靠 cover 不够，必须配合定位：
- 默认
object-position: center center，但人物偏左时可设为object-position: 20% center - 用媒体查询在
max-width: 768px下微调：@media (max-width: 768px) { img { object-position: 10% center; } } - 避免对所有图片统一设固定值——每张图的关键区域不同，建议在 HTML 中用
data-focus属性标记，再用 CSS 变量注入：object-position: var(--focus, center center)
切换动画用 transform + will-change，别碰 left 或 margin
老式轮播靠 left: -100% 移动 ul，会导致重排、卡顿，尤其在低端安卓机上明显：
立即学习“前端免费学习笔记（深入）”；
- 改用
transform: translateX(-100%)，触发 GPU 加速 - 给轮播容器加
will-change: transform（仅在切换瞬间加 class 触发，切完移除，避免持续开销） - 过渡时间统一用
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease-in-out更顺滑
触摸与键盘交互必须显式声明 tabindex 和 touch-action
很多“响应式焦点图”在手机上拖不动、键盘 Tab 跳不到按钮，根本原因是可访问性缺失：
- 轮播容器加
tabindex="0"，确保能被键盘聚焦 - 左右按钮必须有
type="button"，否则表单提交会刷新页面 - 禁用浏览器默认手势干扰：
touch-action: pan-Y pinch-zoom（允许上下滚动和缩放，但禁止左右拖拽触发浏览器历史前进/后退） - 慎用
pointer-events: none遮罩层——它会同时屏蔽触摸和焦点，替代方案是用aria-hidden="true"+inert属性
真正难的不是让图“动起来”，而是让动的过程在任意设备、任意网络、任意辅助技术下都可预测、可中断、可回溯。比如自动播放暂停逻辑，不能只监听 blur，还要处理 prefers-reduced-motion 和页面被切到后台的情况。
