0

我有一个正在响应的博客模板，如何以较小的分辨率更改正文的背景，我正在尝试以下方法，但它不起作用。

@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我想以较小分辨率覆盖的伪类的属性。

4

1 回答 1

4 
@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;
  }
}

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

于 2013-10-25T23:11:18.060 回答