时间戳

首页 > 解决方案 > 只有屏幕和（最小宽度：0px）和（最大宽度：327px）不起作用

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

问题描述

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}

标签： htmlcss

解决方案

CSS 规则的特殊性在这里起作用。您可以在检查器中看到您想要的规则被划掉，而应用另一个规则。这是因为内联样式比通常声明的类选择器更重要。修复将内联样式从style图像属性中移出的问题，并将这些样式移到您的样式表中。然后您的媒体查询应该以正确的宽度覆盖。

例如，在这个代码片段中，您可以看到带有类的 div在 CSS 规则中.he的背景颜色为redstylestyle="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>

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

推荐阅读