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

Question

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

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

因此使用这种添加方法(随着视口(viewport)变大而不是变小而添加类)必须添加新样式，并且由于您为更宽视口(viewport)尺寸添加的所有新类都添加在基本样式之上会以最小的视口(viewport)尺寸创建我有点困惑。

困惑在于一个有针对性的例子。

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

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

这就是问题所在，就是类命名会受到怎样的影响。

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

第一个例子:我会在代码中只使用一个类名，然后根据目标媒体查询使用相同的类名，但向其添加新样式(我假设会覆盖较小视口(viewport)尺寸的样式)所以它呈现不同？

<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)，每个类都会根据视口(viewport)大小触发不同的媒体查询。

<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

Would i create a new class name to the "nav" element that would render those styles or could i use the same class name but just add the new styles to it?

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