如何阻止 mobile CSS 被 main CSS 覆盖

Question

我的 CSS 包含以下页脚代码：

footer
{
text-align:center;
font-size:small;
    /* Part 3/3 of Sticky Footer code */
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
overflow: hidden;
}

页脚文本在移动设备上被截断，因此我添加了以下行：

@media only screen and (orientation: portrait) {
footer
{
height: 40px;
}
}

40px 高度规则被 30px 规则覆盖。它只适用于 !important 所以我有点困惑。哪个 CSS 规则？在发生冲突的情况下，特定于媒体的查询不应该遵循自己的规则吗？这不是为不同的媒体类型制定单独的 CSS 规则的全部意义吗？

Answer 1

我一直遵循css计算方法
问题是在您的页脚高度上发现的，因此要覆盖此问题，您可以在 CSS 上使用 calc 方法，这很有用。

@media only screen and (orientation: portrait) {
footer{
    height: calc( 100% + 40px );
  }
}

Answer 2

检查您的 CSS.

的位置

If CSS class in one file make sure that mobile CSS class is written after main CSS.

If they are in multiple files then mobile CSS should be added after main CSS.

Answer 3

这不是媒体查询的工作方式。 CSS 仍然一如既往地遵循相同的特异性规则。如果你写 footer {...} 然后在这个语句之后的 10 行你再次写 footer { ... } 第二个页脚中的样式会覆盖上一行中的样式。

具有 @media 规则的样式也是如此，它们只是在特定的屏幕尺寸上进行评估。你不说 "this is how this must look like for this resolution"。否则你将不得不写很多重复的 CSS。您可以覆盖样式，但您还必须注意放置样式的顺序。

您写道，移动页脚规则位于文件顶部。如果您想覆盖此设备的规则，您应该将所有手机 CSS 移至文件底部。

如何阻止 mobile CSS 被 main CSS 覆盖

How to stop mobile CSS from getting overridden by main CSS

html

css

mobile

responsive-design