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预处理器。它们使用起来非常简单，并且可以帮助您尽可能地保持代码干净。祝你好运！

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

1 个答案: