屏幕旋转时CSS动画的width 100%属性未更新问题求助

你的问题核心是：屏幕方向切换时，浏览器没有重新计算基于calc和CSS变量的宽度值，或者动画的关键帧状态没有适配新的视口尺寸，导致轮播定位偏移。以下是几种可行的修复方案：

方案1：监听resize事件重置动画与样式 #

方向切换会触发resize事件，通过JS监听该事件，强制容器重绘并重置动画，确保样式适配新视口：

const container = document.querySelector('.container');

window.addEventListener('resize', () => {
  // 强制触发重排重绘
  container.style.display = 'none';
  void container.offsetHeight; // 触发重排
  container.style.display = 'flex';
  
  // 重置动画状态
  container.style.animation = 'none';
  void container.offsetHeight;
  container.style.animation = 'test_carousel calc(3000ms * var(--item-count)) infinite';
});

方案2：优化CSS宽度计算逻辑 #

改用vw结合flex布局的flex-basis属性，确保项的宽度在视口变化时自动适配：

.wrapper {
  overflow-x: hidden;
  width: 100vw;
}
.container {
  --item-count: 5;
  display: flex;
  width: calc(100vw * var(--item-count));
  height: 100px;
  animation: test_carousel calc(3000ms * var(--item-count)) infinite;
}
.item {
  height: 100px;
  flex: 0 0 calc(100vw / var(--item-count)); /* 用flex-basis确保宽度严格适配 */
}
/* 动画关键帧保持不变 */
@keyframes test_carousel {
  0% { transform: translateX(0%) }
  22% { transform: translateX(0%) }
  25% { transform: translateX(-20%) }
  47% { transform: translateX(-20%) }
  50% { transform: translateX(-40%) }
  72% { transform: translateX(-40%) }
  75% { transform: translateX(-60%) }
  97% { transform: translateX(-60%) }
  100% { transform: translateX(-80%) }
}

方案3：使用CSS容器查询（现代浏览器） #

如果目标浏览器支持容器查询（Chrome 105+、Firefox 110+），可以用cqw（容器查询宽度）替代%或vw，让组件基于容器尺寸自动适配：

.wrapper {
  overflow-x: hidden;
  container-type: inline-size; /* 声明容器查询上下文 */
}
.container {
  --item-count: 5;
  display: flex;
  width: calc(100cqw * var(--item-count));
  height: 100px;
  animation: test_carousel calc(3000ms * var(--item-count)) infinite;
}
.item {
  height: 100px;
  width: calc(100cqw / var(--item-count));
}

注意事项 #

• 方案1兼容性最好，覆盖所有主流浏览器；
• 方案2需确保wrapper的宽度严格基于视口，避免继承父元素宽度导致的计算偏差；
• 方案3需确认目标浏览器支持容器查询特性。

内容的提问来源于stack exchange，提问作者Oscar