倒计时器响应式适配：CSS改百分比无效，求动态适配方案

下面是修改完成的响应式倒计时代码，直接替换原代码即可生效：

{% if end_date != blank %}
<div class="timer">
  {% if title != blank %}
  <h4 class="timer__title">{{ title }}</h4>
  {% endif %}
  <div class="timer-display">
    <div class="timer-block">
      <span class="timer-block__num js-timer-days">00</span>
      <span class="timer-block__unit">Days</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-hours">00</span>
      <span class="timer-block__unit">Hours</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-minutes">00</span>
      <span class="timer-block__unit">Minutes</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-seconds">00</span>
      <span class="timer-block__unit">Seconds</span>
    </div>
  </div>
</div>
<br><br>
<style>
/* styles for timer */
  .timer {
    padding: 2%;
    margin: 1% 0;
    box-sizing: border-box;
  }

  .timer--expired {
    display: none;
  }

  .timer__title {
    @extend .paragraph;
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.25rem);
  }

  .timer-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1%;
    min-width: 280px;
    gap: 1%;
  }

  .timer-block {
    position: relative;
    width: calc(25% - 0.75%);
    padding: 0 1.5%;
    box-sizing: border-box;

    &:not(:last-child):after {
      content: ':';
      position: absolute;
      right: 0;
      top: clamp(2px, 0.5vw, 3px);
      font-size: clamp(1.5rem, 4vw, 2rem);
    }
  }

  .timer-block__num {
    display: block;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
  }

  .timer-block__unit {
    display: block;
    text-align: center;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    font-weight: 900;
    margin-top: 0.5%;
  }

  /* 移动端额外优化 */
  @media (max-width: 480px) {
    .timer-display {
      gap: 2%;
    }
    .timer-block {
      width: calc(25% - 1.5%);
      padding: 0 2%;
    }
  }
</style>

<script type="text/javascript">
  var second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

  var countDown = new Date('{{- end_date -}}').getTime(),
      x = setInterval(function() {
      var now = new Date().getTime(),
          distance = countDown - now;
      
      // 补零处理，确保数字始终是两位
      document.querySelector('.js-timer-days').innerText = String(Math.floor(distance / (day))).padStart(2, '0'),
      document.querySelector('.js-timer-hours').innerText = String(Math.floor((distance % (day)) / (hour))).padStart(2, '0'),
      document.querySelector('.js-timer-minutes').innerText = String(Math.floor((distance % (hour)) / (minute))).padStart(2, '0'),
      document.querySelector('.js-timer-seconds').innerText = String(Math.floor((distance % (minute)) / second)).padStart(2, '0');

      // 倒计时结束后清除定时器
      if (distance < 0) {
        clearInterval(x);
        document.querySelector('.timer').classList.add('timer--expired');
      }
    }, second)
</script>
{% endif %}

关键改动说明 #

• 响应式字体：用clamp(min, preferred, max)替代固定px值，字体大小随屏幕宽度自动缩放，兼顾不同设备可读性
• 百分比单位替换：将padding、margin等固定值改为百分比，配合box-sizing: border-box确保元素尺寸计算准确
• 块级元素宽度优化：用calc()计算timer-block宽度，抵消flex gap的影响，避免布局错位
• 冒号定位适配：冒号的top值和字体大小也用clamp()设置，保证在不同屏幕下位置正确
• 补零功能：新增数字补零逻辑，让倒计时数字始终显示两位，视觉更统一
• 结束处理：添加倒计时结束后的定时器清除和隐藏逻辑，完善业务流程

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