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

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

如果没有看到您的确切代码库（或真实世界的示例），就很难协助具体细节。对于上面的示例，我建议为每个元素设置一个基础 class，这样您就不会一遍又一遍地重复这些样式。

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

.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 值，只需为不同的媒体查询重写它即可。我还建议研究并使用 CSS 预处理器，如 Sass 或 LESS。它们使用起来出奇地简单，并有助于让您的代码尽可能保持干爽。祝你好运！

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

Duplicate values on elements in different media queries

html

css

elements

duplicates

media-queries