為什么我的媒體查詢對我的CSS沒有影響？

我正在制作一個裝在盒子里的計數器。我試圖讓這個計數器回應不同的螢屏尺寸，但我嘗試使用的媒體查詢由于某種原因不起作用。

我嘗試將設備寬度更改為低于 768 像素，但查詢對計數器沒有影響，我不知道為什么。我已經包含了計數器的 HTML/PHP 代碼以及 CSS。任何人都可以弄清楚為什么它不起作用

我已經確保這個標簽包含在檔案的頭部。

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

HTML：

<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  data-to="'.$bottleCount[0].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[1].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[2].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[3].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[4].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[5].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[6].'" data-speed="5000"></span>';
        ?>
        </h2>      
    </div>
    <p class="count-text"><?php echo constant('LANG_FOOTER_BOTTLES_REC'); ?></p>
</div>

CSS：

.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);    
}

uj5u.com熱心網友回復：

缺少的右括號

將右括號添加到關鍵幀

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

標籤：php html css 媒体查询

上一篇：如何阻止一列寬度縮小并讓另一列填充剩余寬度

下一篇：使用Bootstrap對齊左邊緣時居中串列項