需要帮助使这个响应 - CSS/HTML/JS答案

【问题标题】：Need Help making this responsive - CSS/HTML/JS需要帮助使这个响应 - CSS/HTML/JS
【发布时间】：2021-12-07 02:05:59
【问题描述】：

我一直在努力让这个倒数计时器响应移动设备和小型设备的响应，但我正在苦苦挣扎。理想情况下，我希望 flex 属性之间的距离随着屏幕变小而缩小，允许倒计时彼此靠近，以便它适合任何尺寸的屏幕。但是，我不知道该怎么做。所以我试图把'flex-direction: column'放在@media 部分，但什么也没发生。随着屏幕变小，我还尝试减小倒数计时器的大小，但这也无济于事。

const countdown = document.querySelector(".countdown");

const interval = setInterval(() => {
  const deadline = new Date(2021, 11, 15, 12, 00, 00);

  const current = new Date();

  const diff = deadline - current;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24)) + "";
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24) + "";
  const minutes = Math.floor((diff / (1000 * 60)) % 60) + "";
  const seconds = Math.floor((diff / 1000) % 60) + "";

  countdown.innerHTML = `
    <div data-content="Days">${days.length === 1 ? `0${days}` : days}</div>
    <div data-content="Hours">${hours.length === 1 ? `0${hours}` : hours}</div>
    <div data-content="Minutes">${
      minutes.length === 1 ? `0${minutes}` : minutes
    }</div>
    <div data-content="Seconds">${
      seconds.length === 1 ? `0${seconds}` : seconds
    }</div>
`;

  if (diff < 0) {
    clearInterval(interval);
    countdown.innerHTML = "<h1>Countdown is over!</h1>";
  }

  document.querySelector(".reset").addEventListener("click", () => {
    clearInterval(interval);

    const divs = document.querySelectorAll(".countdown div");

    divs.forEach((div) => {
      div.innerHTML = "00";
    });
  });
}, 1000);

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

html {
  font-size: 62.5%;
}



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

.countdown-wrapper h1 {
  font-size: 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;
}

.countdown div {
  width: 13rem;
  height: 13rem;
  background: linear-gradient(
    to bottom,
    rgba(61, 58, 58, 0.9) 50%,
    rgba(99, 93, 93, 0.9) 0
  );
  margin: 0 4rem 12rem 4rem;
  font-size: 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: 2.2rem;
  font-weight: 400;
  position: absolute;
  bottom: -6rem;
}

/*===============  Responsive Section ===============*/

/* For small devices */
@media screen and (min-width: 320px){
  .countdown div {
    width: 8rem;
    height: 4rem;
    background: linear-gradient(
      to bottom,
      rgba(16, 15, 15, 0.9) 50%,
      rgba(57, 53, 53, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 2.5rem;
    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;
  }  
}

/* For medium devices */
@media screen and (min-width: 576px){
  .countdown div {
    width: 10rem;
    height: 10rem;
    background: linear-gradient(
      to bottom,
      rgba(61, 58, 58, 0.9) 50%,
      rgba(99, 93, 93, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 5rem;
    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;
  }
}

@media screen and (min-width: 767px){
  .countdown div {
    width: 12rem;
    height: 12rem;
    background: linear-gradient(
      to bottom,
      rgba(61, 58, 58, 0.9) 50%,
      rgba(99, 93, 93, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 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;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Countdown</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="countdown-wrapper">
        <h1>Coming Soon...</h1>
        <div class="countdown"></div>
      </div>
    </div>

    <p>countdown timer</p>

    <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

document.querySelector(".reset").addEventListener("click", () => { clearInterval(interval); 你的重置班在哪里？
请 a) 修复您的 sn-p，使其不会引发错误（没有重置按钮，删除包含 style.css）和 b) 用草图说明您想要倒计时的内容看起来像在小屏幕上

标签： javascript html css responsive-design

【解决方案1】：

如果您希望缩小框之间的距离，请更改每个屏幕尺寸的“边距”尺寸。例如，对于最小的屏幕，将边距更改为：

margin: 0 1rem 1rem 1rem; /*these by order are: top distance | right | bottom | left */

块之间的距离几乎总是基于这些元素的填充和边距（填充是元素内容和元素边框之间的内部距离，而边距表示元素边框和外部（其他）元素之间的距离)，所以总是先摆弄它们。

另外，不要忘记为每个屏幕尺寸添加“.countdown div::after”，因为您的文本“天/小时/等”会被挤在一起。所以在这个例子的最小屏幕尺寸里把字体大小改成1.2rem。

【讨论】：