可以使用较少的媒体查询来完成此代码吗？

Question

这看起来非常重复，有没有一种方法可以将它结合起来，这样我就不必一遍又一遍地写.more-photos a和@media？

@media (min-width: 768px) and (max-width: 1199) {
  .more-photos a {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .more-photos a {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  .more-photos a {
    font-size: 22px;
  }
}

Answer 1

不，因为这就是你编写CSS规则以及它们如何工作的方式。减少输入的唯一方法可能是使用CSS预处理器，例如SASS，这可以减轻一些打字，但可能不会使处理过的CSS看起来有任何不同。

Answer 2

稍微简化的版本（少一个媒体查询）：

.more-photos a { font-size: 22px; }

@media (max-width: 1199px) { .more-photos a { font-size: 14px; } }

@media (max-width: 768px) { .more-photos a { font-size: 16px; } }