问题：

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

边意

2023-03-14

我正在做一个装在盒子里的计数器。我试图使这个计数器对不同的屏幕大小做出响应，但由于某些原因，我试图使用的媒体查询将无法工作。

我曾尝试将设备宽度更改为768px以下，但查询对计数器没有影响，我不确定原因。我已经包括了计数器的HTML/PHP代码以及CSS。有人知道为什么它不起作用吗

我已确保此标签包含在文档的标题中。

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

超文本标记语言：

<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>

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

共有1个答案

何哲

2023-03-14

你的代码有效。我将背景色添加到两个容器中。我想这就是问题所在。因为白色背景上的颜色是白色的。

.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;
    background: black;
}
.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;
}

@media only screen and (max-width: 768px) {
   .counter-container {
     background:green;
      top: 12vh;
      right: 4%;
   }
   .count-title {
      line-height: 60px;
   }
   .count-text {
      padding: 4px;
      font-size: 28px;
   }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="counter-container">
  <h1 class="count-title">Title</h1>
  <p class="count-text">Text</p>
</div>
</body>

类似资料：

为什么我的CSS媒体查询被忽略或覆盖？

问题内容：这让我发疯！我看了一些关于Stackoverflow的问题，发现ID元素的优先级高于类元素（这很高兴知道，但是我感觉这不是我的问题）。这是我苦苦挣扎的NAVIGATION菜单。（我使用最大宽度顺便说一句）这是我的资产净值的一般CSS：现在，当视口小于1140px时，我希望CSS更改菜单，如下所示：因此，基本上，菜单将以较少的顶部填充向左浮动。当视口小于800像素时，我希望CSS
为什么我的CSS3媒体查询不起作用？

问题内容：在styles.css中，我正在使用媒体查询，这两个查询都使用以下变体：当我缩小窗口时，这些网站的大小会调整为我希望在常规浏览器（Safari，Firefox）中使用的布局，但是，手机上的移动布局根本无法显示。相反，我只是看到默认的CSS。谁能指出我正确的方向？问题答案：所有这三个都是有用的提示，但看来我需要添加一个元标记：现在它似乎可以同时在Android（2.2）和iPh
CSS媒体查询

主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
没有媒体查询的CSS网格最大列

问题内容：是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？我有隐式类，允许行包装到新行上，但是没有最大列数。这是使用弹性盒的一种方法的代码笔 CSS：另一种方法是使用网格我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？问题答案：使用flexbox，您可以简单地将a设置为容器，因为您的元素具有固定的宽度：唯一的缺点是您需要知
IE8对CSS媒体查询的支持

问题内容： IE8是否不支持以下CSS媒体查询：如果没有，替代的写作方式是什么？在Firefox中也可以正常工作。下面的代码有问题吗？问题答案： IE9之前的Internet Explorer版本不支持媒体查询。如果您正在寻找一种降低 IE8用户设计水平的方法，则可能会发现IE的条件注释很有用。使用此功能，可以指定特定于IE 8/7/6的样式表，该样式表将覆盖以前的规则。例如：这
CSS媒体查询重叠的规则是什么？

问题内容：我们如何准确地间隔媒体查询以避免重叠？例如，如果我们考虑以下代码：在所有支持的浏览器上，分别以20em和45em会发生什么？我见过人们在使用：像799px然后是800px之类的东西，但是屏幕宽度为799.5 px呢？（显然不是常规显示器，而是视网膜显示器？）考虑到规格，我对此最好奇。问题答案： CSS媒体查询重叠的规则是什么？级联。规则对级联是透明的，因此当两个或多个规则

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档