ios - 如何让@media 优先于普通样式

Question

我有两个 CSS，一个用于 iPhone (@media)，一个用于标准浏览器，我基本上希望其中之一为真:

#currentroom_users {
    width: 175px;
    float: left;
    border-left: 1px dotted <?php echo $themeSettings['tab_border_light'];?>;
    padding-left: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
    #currentroom_users {
        display: none;
    }
}

目前，标准的#currentroom_users 样式始终存在。如果我使用的是 iPhone (@media)，它只会添加“显示:无；”但保留所有其他样式...

这基本上是一个 DIV，我希望在桌面浏览器上显示，在 iPhone 上隐藏。

这是我添加媒体标签之前的样子，显示的是 div(它是带有用户名的 div): http://i.imgur.com/4zHoCd5.png

这是我添加媒体标签后的样子，div 没有显示，但它应该在的位置的空间仍然存在: http://i.imgur.com/YYEs6jc.png

我注意到，当我查看源代码时，div 仍然出现在代码中。不确定这是否符合预期。

谢谢

Answer 1

#currentroom_users 中的样式层叠在您的样式表中，并且也应用于您的媒体查询中的样式。因此 CSS 代表级联样式表...

级联

要强调这一点...您的样式也不必出现在媒体查询中才能发生这种情况。或者换句话说，样式总是级联的。这就是为什么您会遇到某些代码只有放在不同代码之上或之下才能工作的问题。例如:

你有一个选择器，从第 001 行开始有一些像这样的样式......

001    .selector ul li {
002       color: #fff;
003       font-size: 2em;
004       text-transform: uppercase;
005    }

然后...针对不同的选择器会出现一些其他样式...

006   .differentSelector { border: 1px solid red; }
.........
.........
125   .evenMoreDifferent { background: #000; }

然后...您再次拥有与 001 相同的选择器，但添加了不同的样式并更改了一个属性。

126   .selector ul li {
127      color: #c00;
128      background: blue;
129      border-radius: 10px;
130   }

您的浏览器读取的内容...

在您的浏览器中加载页面时，浏览器将读取包含以下信息的选择器:

.selector ul li {
   color: #c00;
   font-size: 2em;
   text-transform: uppercase;
   background: blue;
   border-radius: 10px;
}

关于您帖子后面其他问题的一些定义

“我注意到，当我查看源代码时，div 仍然出现在代码中……不确定这是否符合预期。”

CSS 是一种在视觉上改变 HTML 元素的代码。它不会以任何方式改变 HTML 本身。当您将某些内容设置为 display: none; 时，您只是在告诉浏览器不应显示该元素，因此它会呈现为不可见。代码仍然存在，并且该元素保留了它以前的所有 CSS 样式，以防您在任何时候使其可见，但它在 View 中是隐藏的。

重要的是要注意，这通过将元素从文档中完全删除来使其“不可见”。

See this Wiki on the CSS Property "Display"

您的具体情况

你会发现将它设置为 display: none;实际上并没有“离开它以前占据的空间”。那个空间现在是“空的”。您的列似乎保留了下来，但这可能是因为您的左列具有某种设置宽度。

Here is a JSFiddle demonstrating the above.有三个 div，每个都有不同的颜色，都是 80px x 80px。您会看到在 CSS 表的底部，我已将 .blue 类设置为 display: none; 您还会注意到，黄色框与红色框接触。如果注释掉这一行，您会看到蓝色框重新出现在红色框和黄色框之间。

现在... Here is a JSFiddle that uses opacity而不是 display 使框不可见。您会注意到蓝色方框不见了，但在原来的位置有一个空白。那是因为从字面上看，它已经变得不可见了。实际从文档中删除之间的一个关键区别。

最后，here is a JSFiddle using the visibility property ... 同样，您会注意到蓝色框是不可见的，但仍然留有空间。

总结...

• 无论如何，样式总是级联的。
• 你的元素被设置为 显示:无；实际上已经从文档中删除了，它只是 看起来不像。您可能需要调整宽度 左栏。
• 只是因为 div 已经从 文档，并不意味着它已从代码中删除。