CSS 媒体查询到底是如何工作的?

发布于 2024-12-10 03:30:43 字数 507 浏览 0 评论 0原文

假设我有 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一身骄傲 2024-12-17 03:30:43

@testndtv;您必须在 ipad.css 中编写 overflow:visible 因为 media query 仅检测屏幕分辨率 &然后根据屏幕分辨率激活css。这就是为什么我们只能从激活属性中覆盖我们的ipad.css属性。

因此,对于ipad.css这样写:

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

@testndtv; you have to write overflow:visible in your ipad.css because media query only detect the screen resolution & then active the css according to screen resolution. That's why we can only override our ipad.css property from the activate one.

So, for ipad.css write like this:

div.someClass{float:left;overflow:visible;height:100px}
时光无声 2024-12-17 03:30:43

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 in desktop.css for the same element (provided you load the desktop.css first) will default to the rules set in desktop.css.

吃素的狼 2024-12-17 03:30:43

这取决于您如何提出查询。你可以两者都做。

This is dependend on how you place your queries. You can do both.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文