为什么媒体查询不适用于 django css 样式？答案

【问题标题】：why media queries is not working with django css styling?为什么媒体查询不适用于 django css 样式？
【发布时间】：2021-06-05 22:23:13
【问题描述】：

下面是 HTML 标签

<div class="logo">
    <img src="{% static 'img/sunil.png' %}" id="logo"  alt="">
</div>

STYLE.CSS

我在 css 文件中所做的如下：

#logo {
    height: 60px;
    width: 120px;
}

@media only screen and (max-width: 500px) {
    .logo {
        height: 20px;
        width: 60px;
    }
}

我尝试使用媒体查询更改图像大小，但它不起作用。

style.css 连接在主文件中，因为当我使用 #logo 并更改了高度和宽度时，它可以工作，但是当我尝试媒体查询时，它就不起作用了。

【问题讨论】：

标签： html css django media-queries

【解决方案1】：

确保您在 html 的 Head 部分中有元标记，并检查您的目标是使用类 .logo 的 div 还是使用 id #logo 的 img <meta charset="utf-8">

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

【讨论】：

【解决方案2】：

您的媒体查询似乎不起作用。首先，确保你的头部有：

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

另外，请尝试从您的媒体查询中删除 only：

#logo {
    height: 60px;
    width: 120px;
}

@media screen and (max-width: 500px) {
    #logo {
        height: 20px;
        width: 60px;
    }
}

请注意，您在一个页面中只使用一次logo id。 Here你可以看到screen和only screen的区别。

【讨论】：

【解决方案3】：

在您的代码中，“logo”是一个 id。

  <img src="{% static 'img/sunil.png' %}" id="logo"  alt="">

但是在这里，

@media only screen and (max-width: 500px) {
    .logo {
        height: 20px;
        width: 60px;
    }
}

你定义为一个类。尝试用#logo 更改.logo

【讨论】：