只有屏幕和（最小宽度：0px）和（最大宽度：327px）不起作用

Question

响应在HTML和div标签不起作用。

我的头像是

<link media="only screen and (min-width: 0px) and (max-width: 327px)" rel="stylesheet" type="text/css" href="mobile.css">

我的身体代码是

<div id="div1">

    <div class="he" style="background-color: #65a82a; height: 40px: 10px " >
        <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;">   لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span>
    </div>
    <div class="ad" style="text-align: left;margin: 18px">
        <a href="<?php echo $imgsrc[0]; ?>"> <span style="color: black;font-size: 17px"> https://pic.leanilo.com/wp-content/uploads/2019/03/1553530968n8g4k.jpg </span></a></div></div>

和tablet.css代码是

.he{background-color: red; height: 55px;margin: 10px}

Answer 1

CSS规则的特殊性在这里发挥作用。您可以在检查器中看到所需的规则被划掉，而另一个规则则应用。这是因为内联样式超过了通常声明的类选择器。要修复从图像上的style属性移动内联样式，并将这些样式移动到样式表。然后您的媒体查询应覆盖正确的宽度。

例如，在此片段中，您可以看到类.he的div在CSS规则中的背景颜色为red，但是当您运行该片段时，背景为绿色，因为您在该元素上具有绿色背景颜色的style属性（style="background-color: #65a82a; height: 2.8vmax;margin: 10px "）。

.he {
  background-color: red;
  height: 55px;
  margin: 10px;
}

<div class="he" style="background-color: #65a82a; height: 2.8vmax;margin: 10px " >
  <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;">   لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span>
</div>

这称为内联样式，内联样式在它们定位也在CSS中声明的规则的情况下获胜。媒体查询将以相同的方式工作。

要解决此问题，请将样式移出HTML并进入CSS，然后您将获得更预期的结果：

.he {
  background-color: #65a82a;
  height: 40px:
}
.ac {
  margin: 10px 7px 5px 3px;
  color: white;
  font-size: 3vmax;
}

@media only screen and (max-width: 327px) {
  .he {
    background-color: red; /* these styles now applied */
    height: 55px;
    margin: 10px;
  }
}

<div class="he">
  <span class="ac">   لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span>
</div>

运行代码段并更改屏幕大小以查看媒体查询是否正常工作。