Question

我有一个博客模板，我正在做出回应，如何在较小的分辨率下改变身体的背景，我正在尝试以下但是它不起作用。

@media (max-width: 30em) {

  .post-template {
    background-color: @color_01;
  }
}

我的身体有班级

<body class="post-template">

应用体色设计的MixIn如下

.BodyColor () {
background-color: @color_01;
background-image: url(../images/body.jpg);
color: @color_05;
overflow-x: hidden;
background-attachment: fixed;
&:after {
content: ' ';
width: 100%;
height: 50%;
background-color: darken(@color_01, 10%);
.transform(~"skew(-20deg) rotate(-20deg)");
left: 0;
top: 30%;
.opacity(0.5);
position: fixed;
}

}

我想覆盖.transform调用，因此较小的分辨率没有偏差，因为渲染速度太慢

但是我设置了body:after伪类的一些属性，我希望以较小的分辨率覆盖它们。

Answer 1

@media screen and (min-width: 30em) {
  .post-template {
    background-color: @big_size_color;
  }
  .post-template:after {
    yourcode...
  }
}
@media screen and (max-width: 30em) {
  .post-template {
    background-color: @color_01;
  }
}

除非页面大于30em，否则不会显示body:after代码。此规则适用于您只想在较高分辨率上工作的任何内容，并在较小分辨率上“覆盖”。不要在@media电话之外单独声明它。

如何以较小的分辨率替换身体背景

1 个答案: