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

Posted 2023-03-05

【中文标题】为啥我的媒体查询对我的 CSS 没有影响？

【英文标题】：Why does my media query have no effect on my CSS?为什么我的媒体查询对我的 CSS 没有影响？

【发布时间】：2022-01-17 21:15:41

【问题描述】：

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

我尝试将设备宽度更改为 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" >
    <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>

【问题讨论】：

请提供您的所有代码，包括 html ;-)

欢迎来到 SO！我建议所有新用户访问How to Ask，了解如何充分利用 SO。请注意，如果您包含minimal reproducible example，它将使社区更容易理解您的问题，进而为您提供有用的指导。祝你好运，编码愉快！

@MarioG8 我添加了更多代码。我不能全部添加，因为它是一个相当大的文档。

【参考方案1】：

缺少的右括号

为关键帧添加右括号

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

【讨论】：

嗨，我已经添加了完整的代码，之前只是一个 sn-p。我更新的代码仍然适用于您的代码吗？

@Nbaker99 好的。我检查了。它适用于我的示例。但它仅在媒体查询声明高于关键帧声明时才有效。如果低于则媒体查询不起作用。

顺便说一句。漂亮的摇瓶。我喜欢它:-)

解决方案：关键帧中缺少右括号to

是的，它现在可以工作了！谢谢好心的先生，你帮了大忙。也感谢您对我的动画的评论，它很简单但我喜欢它！