Html 不同媒体查询中的元素上存在重复值

我正在尝试清理我的大量媒体查询，并且我已经删除了元素值中与默认元素值相同的所有更改，因此这将显示出来

我的问题是，当重复值存储在单个媒体查询中时，我有什么选择

以下是一个例子：

@media only screen and (min-width: 480px) and (max-width: 767px) {
.fa.fa-check
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}
.fa.fa-shopping-cart
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}
.fa.fa-user
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}

@media only screen and (max-width: 479px) {
.fa.fa-check
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}
.fa.fa-shopping-cart
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}
.fa.fa-user
{
    font-size: 3em;
    border-radius: 100px;
    height: 100px;
    line-height: 100px;
    width: 100px;
}

---

我在元素值中有很多变化，这些变化在媒体查询中也不是重复的，所以我不能将它们全部组合在一起。还有其他选择吗？

如果不查看您的确切代码库（或真实示例），就很难帮助您了解细节。就上面的例子而言，我建议为这些元素中的每一个元素都有一个基类，这样就不会一遍遍地重复这些样式

编辑：作为使用基类的示例，对于上述代码，您可以创建以下类，并将其添加到要使用这些样式属性的每个元素（因此所有图标元素）：

这将消除大量重复的代码，并创建一个更模块化的站点设计

就媒体查询/重复值而言，以下是我如何处理与之合作的网站上的响应项。我认为有三个主要的设备尺寸，即代码>桌面< /代码>、代码>平板> /代码>和<代码>移动< /代码>。因此，如果我要创建一个图标，例如使用两个或更多设备尺寸的默认样式，我将执行以下操作：

/* Default styling */
.icon-example {
  width: 40px;
  height: 40px;
  margin: 40px 0; /* Style which spans two or more queries */
  color: white;
  background: black;
}

@media @mobile-grid {
  margin: 30px 0; /* Overriding this style only on mobile */
}

---

现在，我不必为每个媒体查询声明

margin

值，只需为不同的查询重写它即可。我还建议研究并使用CSS预处理器，如Sass或更少。它们的使用非常简单，可以帮助您尽可能地保持代码的干爽。祝你好运

我将研究CSS预处理器！由于重复这些样式，我一直在与一大堆重新定义的警告作斗争，这就是为什么我试图清理我的媒体查询。既然这不是我最擅长的，你愿意解释一下我将如何为每一个元素创建一个基类吗？我一直在尝试尽可能少地重复，但是如果我不为每个媒体查询声明元素值，它将自动检测默认元素值，并且在上面的示例和我的许多其他示例中，默认元素值都不同。当然，我在原始答案中添加了一个基类示例！媒体查询有点棘手。尽量减少它们，尽量避免查询重叠。如果您有任何更具体的示例需要帮助，请告诉我。好的，它看起来像这样吗（.fa.fa-check{.standard icon}）或者说我现在不知道跟踪了吗？我的主要问题是：我需要更改媒体查询中不同元素的值，CSS验证器会在重新定义这些值时接收这些值，并向我发出警告。最小化我的媒体查询会删除一些警告，但大多数警告仍然存在，我不知道如何消除它们。我有一些例子，如果你曾经处理过这种问题，并想尝试一下。如果没有-我非常感谢您的帮助：）啊，那么您最关心的是验证程序警告。有时候这些都有点过于敏感了。您应该能够将其配置为更宽松或避免错误警告（听起来像是其中一些错误警告）。我现在在手机上，但如果需要的话，我会在几个小时内提供进一步的帮助。如果你有你的文件和你正在使用的验证器的URL，我非常愿意仔细看看，看看是否有什么你应该关心的。

/* Default styling */
.icon-example {
  width: 40px;
  height: 40px;
  margin: 40px 0; /* Style which spans two or more queries */
  color: white;
  background: black;
}

@media @mobile-grid {
  margin: 30px 0; /* Overriding this style only on mobile */
}