CSS 媒体查询是如何工作的？

Question

假设我有 2 个不同的 CSS 文件（desktop.css 和 ipad.css）应用于同一个 html 页面。

我有一些伪 div 定义如下（在 desktop.css）

div.someClass{float:left;overflow:hidden;height:100px}

现在说较小的屏幕尺寸（用户将浏览器调整为 iPad 尺寸）并应用 iPad.css。 所以我的问题是，desktop.css 中定义的属性的效果是否仍然存在，或者它是否完全消失，只有 ipad.css 属性被应用..

就像在 ipad.css 中一样，如果我想要溢出：可见（即默认溢出值），我是否需要明确指定或者如果我只是在 ipad.css

div.someClass{float:left;height:100px}

它会自动将默认溢出：可见值应用于 div ？

Answer 1

@testndtv;您必须在您的ipad.css 中写入overflow:visible，因为media query 仅检测screen resolution，然后根据screen resolution 激活css。这就是为什么我们只能从激活的override 我们的ipad.css 属性。

所以，对于ipad.css，这样写：

div.someClass{float:left;overflow:visible;height:100px}

Answer 2

CSS 中的 C 用于 Cascading。 ipad.css 样式（前提是它们被加载并具有更高的特异性）将具有更高的优先级并将被应用。

任何未在ipad.css 中定义但在desktop.css 中为同一元素定义的属性（前提是您首先加载desktop.css）将默认使用desktop.css 中设置的规则。

Answer 3

这取决于您提出查询的方式。两者都可以。