媒体查询无效，使用类更改显示属性

Question

我有一个不起作用的简单媒体查询......这是我的代码：

在外部样式表中：

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

接下来，在我的PHP Header文件的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

它不起作用，因为浏览器将始终使用＆＃34;＆＃34;定义的css上的内联css。外部风格。 也许你想使用Chrome DevTools（F12），它们会让你的生活更轻松

Answer 2

display的值不正确，没有visible这样的东西，它应该是从属性定义的列表中的内容，请参阅http://www.w3schools.com/cssref/pr_class_display.asp了解有效值

通常情况下，如果将鼠标悬停在黄色警告标记上，则表示出现了问题。

Answer 3

您正在滥用css的display属性。 display属性指定用于HTML元素的框的类型。 没有display: visible;之类的东西。 看看here

• 内嵌默认值。将元素显示为内联元素，如span
• 阻止将元素显示为块元素，如p
• flex 将元素显示为块级Flex容器。 CSS3中的新功能
• inline-block 将元素显示为内联级块容器。该块的内部格式为块级框，元素本身被格式化为内联级框
• inline-flex 将元素显示为内联级Flex容器。 CSS3中的新功能
• inline-table 元素显示为内联级表
• list-item 让元素的行为类似于li元素
• run-in 根据上下文将元素显示为块或内联
• 表格让元素的行为类似于表格元素
• 表格标题让元素的行为类似于标题元素
• table-column-group 让元素的行为类似于colgroup元素
• table-header-group 让元素的行为类似于thead元素
• table-footer-group 让元素的行为像tfoot元素
• table-row-group 让元素的行为类似于tbody元素
• table-cell 让元素的行为类似于td元素
• table-column 让元素的行为类似于col元素
• table-row 让元素的行为类似于tr元素
• 无该元素根本不会显示（对此无效） 布局）
• initial 将此属性设置为其默认值。阅读初始
• inherit 从其父元素继承此属性。

示例css：

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

Answer 4

解决：

问题是级联规则的无政府状态。媒体查询所在的外部样式表无法覆盖HTML文档内部设置的显示属性。解决方案是将内部css移动到外部样式表，然后显示和隐藏媒体查询中的元素。像这样：

/****LOGO*******************/

/ 修复移动电话 / / *************************** /

.logo_1000 {display：inline-block;} / *显示默认值* /

.logo_320 {display：none;} / *隐藏Mobile * /

@media screen and（max-width：768px）{/ *现在我们在手机上，交换徽标* /

.logo_1000{display:none !important;}
.logo_320{display:inline-block !important;}

}