如何让HTML/CSS/JS实现的倒计时器适配移动端等小尺寸屏幕

问题根源 #

你当前的响应式适配失效主要有4个核心原因：

1. 所有断点下.countdown div的左右margin都固定为4rem，屏幕缩小时间距不会跟着变化，自然会出现溢出、挤在一起的问题
2. 你使用min-width作为媒体查询条件，但没有做样式的差异化处理，还重复写了大量相同的CSS属性，冗余的同时也容易出现优先级覆盖问题
3. .countdown没有设置flex-wrap: wrap，小屏幕下四个模块总宽度超过屏幕宽度时会直接溢出，不会自动折行
4. 你尝试修改flex-direction: column没有生效，是因为你只修改了子项div的属性，没有给父容器.countdown设置该属性，同时媒体查询的触发条件写反了

修复方案 #

直接替换你的CSS代码即可，无需修改HTML和JS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Baloo da 2", cursive;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #17181b;
}

.container {
  min-height: 100vh;
  padding: 2rem 1rem;
}

.countdown-wrapper {
  width: 100%;
  text-align: center;
  color: #ddd;
}

.countdown-wrapper h1 {
  /* 用clamp实现字体随屏幕大小自适应 */
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 8rem;
  text-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.5);
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 允许内容折行避免溢出 */
  gap: clamp(1rem, 5vw, 4rem); /* 子项间距随屏幕大小自适应 */
}

.countdown div {
  width: clamp(7rem, 18vw, 13rem); /* 模块宽度自适应 */
  height: clamp(7rem, 18vw, 13rem); /* 模块高度自适应 */
  background: linear-gradient(
    to bottom,
    rgba(61, 58, 58, 0.9) 50%,
    rgba(99, 93, 93, 0.9) 0
  );
  margin-bottom: 8rem; /* 仅保留底部间距，左右间距用gap控制 */
  font-size: clamp(3rem, 10vw, 7rem); /* 数字字体大小自适应 */
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
  position: relative;
}

.countdown div::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.24rem;
  background-color: #17181b;
}

.countdown div::after {
  content: attr(data-content);
  font-size: clamp(1.2rem, 3vw, 2.2rem); /* 标签文字大小自适应 */
  font-weight: 400;
  position: absolute;
  bottom: clamp(-4rem, -6vw, -6rem); /* 标签底部距离自适应 */
}

/* 极小屏幕下改成纵向排列，不需要可以直接删除 */
@media screen and (max-width: 360px){
  .countdown {
    flex-direction: column;
  }
  .countdown div {
    margin-bottom: 6rem;
  }
}

上述代码用clamp函数实现了所有尺寸、间距、字体大小的自适应，不需要写多套重复的媒体查询规则，就能适配所有屏幕尺寸。

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