自适应轮播需三要素协同：容器用max-width: 100%而非固定像素；图片设width: 100%和height: auto保比例；js轮播须实时获取宽度而非缓存offsetwidth。
轮播图容器必须用百分比或 max-width，不能写死 width: 800px
写死像素宽度是自适应失败最常见原因。浏览器窗口缩小时，<div class="carousel"> 如果设了 <code>width: 1200px，就会横向溢出或触发滚动条。
正确做法是让容器「随父级伸缩」：
-
width: 100%或max-width: 100%（推荐后者，更安全） - 移除所有
min-width硬限制（除非你明确需要最小宽度） - 确保父容器（比如
<main></main>或<section></section>）本身也支持流式布局
img 标签必须加 width: 100% 和 height: auto
即使容器自适应了，图片仍可能按原始尺寸渲染，导致错位、拉伸或留白。
关键样式只有两条：
立即学习“前端免费学习笔记（深入）”；
img.carousel-item {
width: 100%;
height: auto;
}注意：height: auto 不能省——它保证宽高比不变；如果写成 height: 100%，图片会被强制拉伸变形。
JS 轮播逻辑里别读 offsetWidth 做固定像素计算
很多老教程用 element.offsetWidth 获取轮播项宽度，再乘以索引算偏移量。这在响应式下会立刻失效：窗口缩放后，offsetWidth 变了，但 JS 缓存的旧值没更新，导致跳帧或卡死。
解决方案分两种场景：
- 纯 CSS 轮播（推荐）：用
transform: translateX(-50%)+transition，靠scrollLeft或getBoundingClientRect()动态读取当前宽度 - JS 控制：每次切换前重新调用
item.getBoundingClientRect().width，而不是初始化时只读一次 - 使用
ResizeObserver监听容器变化，自动重置轮播状态
移动端触摸滑动要防默认行为，但别误禁 click
加了 touchstart 后常有人直接写 e.preventDefault()，结果导致按钮点击失效、链接打不开。
真正该阻止的是页面滚动干扰轮播，不是所有事件：
carousel.addEventListener('touchstart', e => {
// 只在水平滑动意图明显时阻止默认行为
if (Math.abs(e.touches[0].clientX - startX) > 10) {
e.preventDefault(); // 防止页面跟着拖拽滚动
}
});另外，记得给轮播容器加 user-select: none，避免长按唤起文字选中菜单。
自适应轮播最难的不是写法，而是「宽度来源是否可靠」：CSS 层面靠 max-width 和 width: 100%，JS 层面靠实时测量而非缓存，图片层靠 height: auto 保比例——三者缺一不可。
