사용

Question

때때로 난 그냥 미디어 쿼리에서 하나의 변수를 변경하고

HTML 수 whish :

이

<div id="wrap"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div> 

이하 (작동하지 않습니다) : 물론 컴파일 시간에 때문에 작동하지 않습니다

@base: 1000px; 

@media all and (max-width: 768px) { 
    @base: 600px; 
} 

.child1 { 
    // 500px normally, 300px on small screens 
    height: 0.5 * @base; 
} 
.child2 { 
    // 250px normally, 150px on small screens 
    height: 0.25 * @base; 
    } 

는 @base 설정하고 모든 CLASSE에 적용 에스. 실제로 내 요소에 텍스트가없는 (또는 텍스트 만 리프 노드에서 발생하고 자신의 글꼴 크기를 설정 가정

#wrap 
    { 
    font-size: 1000px; 
    @media all and (max-width: 768px) { 
     font-size: 600px; 
    } 
    .child1 { 
     // 500px normally, 300px on small screens 
     height: 0.5em; 
    } 
    .child2 { 
     // 250px normally, 150px on small screens 
     height: 0.25em; 
     } 
    } 

:

LESS : 그러나, 나는이 더러운 해결 방법을 가로 질러왔다 명시 적으로),이 접근법을 사용할 때 심각한 단점이 있습니까?

Answer 1

나는 확실히 말할 수는 없지만 제안 된 em 방법은 내 취향에 너무 익숙하지 않은 것처럼 보일뿐 아니라, 코더가 쉽게 결정한 요소의 높이를 만들지는 않습니다. 나는 그들이 사용하기위한 것입니다으로 미디어 쿼리를 사용하는 것이 좋습니다, 그리고 너무 같은 값을 얻을 수있는 믹스 인을 구축 할 것이다 :

LESS

@base: 1000px; 
@smallBase: 600px; 

.childHeights(@base) { 
    // 500px normally, 300px on small screens 
    .child1 { 
    height: 0.5 * @base; 
    } 
    // 250px normally, 150px on small screens 
    .child2 { 
    height: 0.25 * @base; 
    } 
} 

@media all and (max-width: 768px) { 
    .childHeights(@smallBase); 
} 

.childHeights(@base); 

CSS 출력

@media all and (max-width: 768px) { 
    .child1 { 
    height: 300px; 
    } 
    .child2 { 
    height: 150px; 
    } 
} 
.child1 { 
    height: 500px; 
} 
.child2 { 
    height: 250px; 
}