CSS 媒体查询到底是如何工作的?
假设我有 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 ?
Let's say I have 2 different CSS files (desktop.css and ipad.css) being applied to the same html page.
I have some pseudo div defined as follows (in desktop.css)
div.someClass{float:left;overflow:hidden;height:100px}
Now at say lower screen size (user resizes browser to iPad size) and iPad.css gets applied.
So my question is, will the effect of properties defined in desktop.css still remain OR is it completely wiped out and only ipad.css properties get applied..
Like in ipad.css, if I want to have overflow:visible (i.e. default overflow value), do I need to explicityly specify that OR if I just define as follows in ipad.css
div.someClass{float:left;height:100px}
it would automatically apply the default overflow:visible value to the div ?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
@testndtv;您必须在
ipad.css
中编写overflow:visible
因为media query
仅检测屏幕分辨率
&然后根据屏幕分辨率
激活css
。这就是为什么我们只能从激活属性中覆盖
我们的ipad.css
属性。因此,对于
ipad.css
这样写:@testndtv; you have to write
overflow:visible
in youripad.css
becausemedia query
only detect thescreen resolution
& then active thecss
according toscreen resolution
. That's why we can onlyoverride
ouripad.css
property from the activate one.So, for
ipad.css
write like this:CSS 中的C 代表级联。
ipad.css
样式(前提是它们在之后加载并且具有更高的特异性)将具有更高的优先级并将被应用。未在
ipad.css
中定义但在desktop.css
中针对同一元素定义的任何属性(前提是您先加载desktop.css
)将默认为desktop.css
中设置的规则。The C in CSS is for Cascading. The
ipad.css
styles (provided they are loaded after and have higher specificity) will have higher precedence and will be applied.Any properties which are not defined in
ipad.css
but are indesktop.css
for the same element (provided you load thedesktop.css
first) will default to the rules set indesktop.css
.这取决于您如何提出查询。你可以两者都做。
This is dependend on how you place your queries. You can do both.