CSS Media Query如何正常工作?

时间:2011-10-14 06:57:26

标签: html css css3 media-queries

假设我有两个不同的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 <中定义如下,我是否需要明确指定OR? / p>

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

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

3 个答案:

答案 0 :(得分:2)

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

所以,对于ipad.css这样写:

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

答案 1 :(得分:1)

CSS中的 C Cascading ipad.css样式(如果它们被加载后具有更高的特异性)将具有更高的优先级并将被应用。

ipad.css中未定义但属于同一元素desktop.css的所有属性(假设您先加载desktop.css)将默认使用desktop.css中设置的规则}。

答案 2 :(得分:0)

这取决于您放置查询的方式。你可以做到这两点。