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 に答える