使用媒体查询和加法方法以及如何命名类？

Question

我的问题是关于使用媒体查询和下面一个非常简单的示例来确定我没有看到任何人特别提到的一件事。

从最小的视口开始，例如 320 像素，您可以看到您的内容在该尺寸下是如何呈现和流动的，然后开始将浏览器拖得更宽，以查看您的设计中断的地方并添加另一个媒体查询。

因此，使用这种附加方法（当视口变大而不是变小时添加类）必须添加新样式，因为您为更宽视口大小添加的所有新类都添加在基础样式之上会以最小的视口尺寸创建我有点困惑。

混淆在于有针对性的示例。

假设我的“nav”元素有一组 320px 视口大小的类，而在 624px 视口大小我想应用另一个导航来显示？

我是要为“nav”元素创建一个新的类名来呈现这些样式，还是可以使用相同的类名但只向其中添加新样式？

这就是问题所在，只是关于类命名将如何受到影响。

所以这是我的代码示例来说明这一点：

第一个示例：我是否只在代码中使用一个类名，然后基于目标媒体查询使用相同的类名但向其添加新样式（我假设会覆盖较小视口大小的样式）所以它的呈现方式不同吗？

<nav class="main">

<ul>
<li>Home</li>
<li>About Us</li>
<li>Learn More</li>
<li>Contact Us</li>
</ul>

</nav>

或者向元素添加另一个类名，这样就不会发生冲突：

在这个例子中，我从一开始就添加了额外的类名（medium、large、x-large），每个类都会根据视口大小触发不同的媒体查询。

<nav class="main medium large x-large">

<ul>
<li>Home</li>
<li>About Us</li>
<li>Learn More</li>
<li>Contact Us</li>
</ul>

</nav>

这是解决问题的好方法，还是有更好的方法？

谢谢。

Answer 1

我是要为“nav”元素创建一个新的类名来呈现这些样式，还是可以使用相同的类名但只向其中添加新样式？

您使用相同的选择器，只是为不同的媒体查询添加不同的样式。

Answer 2

您应该使用相同的类，并根据每个媒体查询的需要更改 CSS。这将有助于使您的标记更清晰，代码更易于维护。

每个后续的媒体查询都会覆盖上一个查询的样式。这样做的一个优点是您只需要准确定义需要从一个查询更改为下一个查询的那些属性。在此示例中，只有 background-color 需要更改，因此 border 不必在每个查询中显式重新定义 - 仍将使用原始 border 样式。

在这个 JSFiddle 中查看一个工作示例：http://jsfiddle.net/GBR8d/。

HTML

<nav class="main">
    <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Learn More</li>
    <li>Contact Us</li>
    </ul>
</nav>

CSS

.main {
    border: 2px solid black;
    background-color: blue;
}

@media (min-width: 320px) {
    .main {
        background-color: red;
    }
}

@media (min-width: 624px) {
    .main {
        background-color: green;
    }
}