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属性中移出，然后将这些样式移到您的样式表中。然后，您的媒体查询应以正确的宽度覆盖。

例如，在此代码段中，您可以看到CSS规则中类别为.he的div的背景色为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>

运行该代码段并更改屏幕尺寸，以查看媒体查询是否正常工作。

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

1 个答案: