Question

我想知道哪种媒体查询是最佳做法。

如果您要定位屏幕尺寸，我通常会执行以下操作：

section#about {
  background-color: yellow;
  color: black;
  padding: 5px 20px;

  @media (max-width: 600px) {
    padding: 0;
  }
}

.button-small {
  margin-bottom: 12px;

  @media (max-width: 600px) {
    margin-bottom: 6px;
  }
}

以下情况会更好：

section#about {
  background-color: yellow;
  color: black;
  padding: 5px 20px;
}

@media (max-width: 600px) {
  section#about {
    padding: 0;
  }
}

.button-small {
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .button-small {
    margin-bottom: 6px;
  }
}

您可以创建一个独立的@media查询并添加您需要更改的类，而不是在类中嵌套@media查询吗？

注意：对不起，我正在使用预处理器（SASS）。我正在考虑组织代码易读性的方法。

Answer 1

媒体查询无法在纯CSS中嵌套。只有CSS预处理器（如LESS和Stylus）允许您这样做。 CSS预处理器本身将采用您在示例1中给出的代码（这是无效的CSS，但在CSS预处理器中有效）并将其转换为类似于示例2的代码（有效的CSS）。

如果您正在使用CSS预处理器，那么如果您有一长串嵌套元素，示例1可能是最好的方法，但如果您不使用CSS预处理器，则示例2是唯一的这将给你任何结果。

Answer 2

使用SASS我更喜欢第一种方法tbh。另外，如果我要编写该代码，我肯定会有_buttons.scss的一个文件和_about-section.scss的一个文件。这意味着无论如何都无法共享媒体查询。但是，我建议您将媒体查询定义为可以重复使用的变量：

$bp-medium: (min-width: 600px);

然后是：

@media #{$bp-medium} {
    // Code here...
}

我更喜欢选择器方法中的媒体查询的一个原因是，当您在SASS内部嵌套时，您仍然希望将媒体查询保持在与原始样式相同的区域中。例如：

.button {
    background: blue;
    padding: 1rem 2rem;

    // Large Buttons
    &--large {
        padding: 1.5rem 3rem;

        @media #{$bp-medium} {
            padding: 2rem 4rem;
        }
    }
}

离开范围＆＃34;会很烦人。只是为了让媒体查询不在课堂内。

课前或课后的@media查询？

2 个答案: