이하의 미디어 쿼리

Question

저는 미디어 쿼리에 다소 익숙하지 않고 업계에서 공유 될 수있는 모범 사례를 찾아 내려고하고 있으며 기술적 우위를 가지고 있습니다. LESS 구문과 관련하여 주목해야 할 점은 미디어 쿼리 내부에서 요소를 래핑 할 수 있으며 요소 내부에서 미디어 쿼리를 래핑 할 수도 있다는 것입니다. 두 가지 모두 원하는 결과를 얻습니다. 한 방법이 다른 방법보다 선호 되는가? 그렇다면 왜 그렇습니까?

예 :

#wrap{ 
    @media(max-width: 991px){ 
     margin-top: 60px; 
     margin-bottom: -350px; 
     padding: 0 0 350px; 
    } 
} 

대 실제로 같은 CSS 출력을 생성 할 당신의 적은 조각의 두

@media(max-width: 991px){ 
    #wrap{ 
     margin-top: 60px; 
     margin-bottom: -350px; 
     padding: 0 0 350px; 
    } 
} 

Answer 1

. LESS documentation은 선택기 내에서 미디어 쿼리를 중첩 할 수 있다는 사실을 특히 강조하므로 첫 번째 스 니펫이 더 나은 방법으로 간주됩니다. 첫 번째 코드 블록의 주요 인수는 wrap 요소에 적용 할 모든 규칙을 모두 하나의 코드 블록에 유지한다는 것입니다.