时间戳

首页 > 解决方案 > 为什么媒体查询不适用于 django css 样式？

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

问题描述

下面是 HTML 标签

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

样式.CSS

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

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

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

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

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

标签： htmlcssdjangomedia-queries

解决方案

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

<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 。在这里您可以看到屏幕和仅屏幕之间的区别。

推荐阅读