不同媒体查询中元素的重复值

Question

我正在尝试清理我的大量媒体查询，并且我已经删除了元素值中与默认元素值相同的所有更改，以便改为显示。

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

这是一个例子：

@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;
}

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

Answer 1

如果不查看您的确切代码库（或真实世界的示例），很难提供具体的帮助。仅使用上面的示例，我建议为这些元素中的每一个都设置一个基类，这样您就不会一遍又一遍地重复这些样式。

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

.standard-icon {
  font-size: 3em;
  border-radius: 100px;
  height: 100px;
  line-height: 100px;
  width: 100px;
}

这将消除大量重复代码并创建更加模块化的网站设计。

就媒体查询/重复值而言，以下是我在使用的网站上处理响应式项目的方式。我考虑了三种主要的设备大小，desktop、tablet 和 mobile。因此，如果我正在创建一个图标，例如在两个或更多设备尺寸上使用默认样式，我将执行以下操作：

/* 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 值，只需为不同的媒体查询覆盖它即可。我还建议研究并使用像 Sass 或 LESS 这样的 CSS 预处理器。它们使用起来非常简单，并有助于使您的代码尽可能干燥。祝你好运！