더 작은 해상도에서 신체 배경을 대체하는 방법

나는 반응 형으로 만드는 블로그 템플릿을 가지고 있는데, 어떻게하면 더 작은 해상도에서 신체의 배경을 바꿀 수 있습니까? 다음을 시도하지만 작동하지 않습니다.더 작은 해상도에서 신체 배경을 대체하는 방법

@media (max-width: 30em) { 

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

내 몸은 클래스

<body class="post-template">

있다

나는 .transform 호출을 덮어 쓰려면

.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; 
}

}

을 다음과 같이 바디 컬러 스타일링이 적용되는 믹스 인 , 너무 느리게 렌더링되므로 작은 해상도에는 왜곡이 없습니다.

그러나 더 작은 해상도로 덮어 쓰려고하는 의사 클래스의 일부 속성을 설정했습니다.

는

출처

2013-10-25 Luke

미디어 쿼리에서 px not em을 사용하고 '@ color_01'은 무엇입니까? –

오타 편집 중입니다. @Chimoo'@ color_01은 변수가 적고 변수에 16 진수 값이 할당됩니다. – Luke

은 덜 작동합니까? –

@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 호출 외부에서 단독으로 선언하지 마십시오.

출처

2013-10-25 23:11:18 Deryck

더 작은 해상도에서 신체 배경을 대체하는 방법

답변

관련 문제