为什么我的媒体查询对我的 CSS 没有影响？

Question

我正在制作一个装在盒子里的计数器。我试图让这个计数器响应不同的屏幕尺寸，但我尝试使用的媒体查询由于某种原因无法工作。

我尝试将设备宽度更改为 768px 以下，但查询对计数器没有影响，我不确定为什么。我已经包含了计数器的 HTML/PHP 代码以及 CSS。谁能弄清楚为什么它不起作用

我已经确定这个标签包含在文档的头部。

<meta name="viewport" content="width=device-width, initial-scale=1">

代码：

  .wrapper {
  width: 100%;
  float: center
}

.counter-container {
  top: 14vh;
  right: 4%;
  float: right;
  width: auto;
  height: auto;
  background-color: rgb(0, 0, 0, 0.7);
  border-radius: 4%;
  font-family: Trebuchet MS;
  color: white;
}

.counter {
  margin-bottom: 5px;
}

.count-title {
  font-size: 10px;
  font-weight: bolder;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  line-height: 70px;
}

.count-text {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 20px 10px 20px;
  text-align: center;
  color: white;
}

.count-dial {
  font-size: 14px;
  font-weight: normal;
  margin: 8px 5px;
  text-align: center;
}

.counter-closer {
  float: right;
  margin: 2px 6px;
  padding: 0;
  font-size: 18px;
  background-color: rgb(0, 0, 0, 0.5);
}

.counter-closer:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.counter-digit {
  background-image: linear-gradient(180deg, rgb(153, 255, 102), rgb(0, 255, 0));
  border-radius: 5%;
  color: rgb(0, 128, 0);
  padding: 5px;
  font-size: 30px;
}

.counter-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
}

.bottle-icon {
  width: 38px;
  height: 50px;
  margin: 0 10px 10px 0;
}

.rotate-bottle {
  transform: rotate(25deg);
  -webkit-animation: shake .5s ease-in-out .1s infinite alternate;
}

@-webkit-keyframes shake {
  from {
    -webkit-transform: rotate(35deg);
  }
  to {
    -webkit-transform: rotate(15deg);
    -webkit-transform: rotate(25deg);
  }

<div class="counter col_fourth counter-container" id="bottleCounter">
  <i class="fas fa-times counter-closer" onclick="closeCounter()"></i>
  <div class="counter-row">
    <!--NB 19.11.21 green bottle image next to counter-->
    <img class="bottle-icon rotate-bottle" src="https://img.resultclothing.net/icons/Green_Bottle.png" alt="water bottle">
    <h2 class="count-title count-number">
      <?php 
            $bottleCount = str_split(intval($var)); 
        echo '
        <span class="timer counter-digit" data-to="'.$bottleCount[0].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[1].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[2].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[3].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[4].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[5].'" data-speed="5000"></span>
        <span class="timer counter-digit" data-to="'.$bottleCount[6].'" data-speed="5000"></span>';
        ?>
    </h2>
  </div>
  <p class="count-text">
    <?php echo constant('LANG_FOOTER_BOTTLES_REC'); ?>
  </p>
</div>

Answer 1

缺少右括号

将右括号添加到关键帧

    @-webkit-keyframes shake {
        from{
            -webkit-transform: rotate(35deg);
        }
        to {
            -webkit-transform:rotate(15deg);
            -webkit-transform:rotate(25deg);   
      } 
    }

为什么我的媒体查询对我的 CSS 没有影响？

Why does my media query have no effect on my CSS?

html

css

php

media-queries