相关疑难解决方法(0)

(这可能已经回答了 - 虽然找不到答案)

传统的@media查询覆盖倾向于将同一括号组下的一个大小/介质的所有覆盖分组.

例如

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

在Sass中,有一种非常好的方法可以在嵌套声明中编写@media查询覆盖,如下所示:

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

现在,在编译时,sass不会将@media查询块组合在一起,因此输出最终会是这样的:

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none; …