css - 媒体查询不起作用，使用类更改显示属性

Question

我有一个不工作的简单媒体查询...这是我的代码:

在外部样式表中:

@media screen and (max-width: 768px) {
    .logo_1000{display:none !important;}
    .logo_320{display:visible !important;}
}

接下来，在我的 PHP 头文件的 html 中，我有两组 Logo HTML，每组都在其自己的包装器中，其中包含上述类之一:

<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;">
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div>
</div>
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;">
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div>
</div>

Answer 1

它不起作用，因为浏览器将始终使用内联 css 而不是由 ""定义的 css 而不是外部样式。也许您想使用 Chrome DevTools (F12)，它们会让您的生活更轻松