Enquire.js를 사용하여 CSS 클래스를 동적으로 추가 및 제거하는 방법

Question

Enquire.js과 함께 미디어 쿼리를 기반으로 CSS 클래스를 동적으로 추가 및 제거하고 싶습니다.하지만이 기능을 사용하는 데 도움이 필요합니다. 내가 가진 가정 Enquire.js와 나는이 작업을 수행하려면 어떻게

<div id ="thumb" class="col-xs-12 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="..."> 
    </a> 
    </div> 

:

여기

if (screens max-width > 480px){ 

#thumb.removeClass('col-xs-12').addClass('col-xs-6'); 

} 

로 시작하는 thumb 요소이다 : 나는 의사 형태의 종류에서 원하는 것을 여기

입니다 필요한 모든 파일이 포함되어 있습니다.

Answer 1

enquire.js 사용에 대한 유용한 튜토리얼 here이 있습니다.

, 나는 당신의 진짜 문제는 당신이 0 767px 사이의 부트 스트랩의 다른 브레이크 포인트의 부족에 의해 ( like so many others are) 좌절되는 것을 짐작했다 가졌어요.

내 초능력 트릭 중 하나를 나와 공유 할 수 있습니까? 문의 할 때 해킹하려고 시도하는 대신 페이지를 마크 업하면 xml은 그리드가 481px와 768px 사이에서 작동하는 방식입니다. 그런 다음이 미디어 쿼리를 추가하십시오.

@media (max-width:480px){ /* technically you can set this to any value you prefer that is below 767 */ 
    [class^="col-xs-"]{ 
     float:none; 
     width:auto; 
    } 
} 

기본적으로 그리드에 다른 중단 점이 추가됩니다. 분명히 반응 형 헬퍼 클래스 (visible/hidden)와 같은 것을 변경하지는 않지만, 실제로 필요한 경우에는 자신 만의 클래스를 추가 할 수 있습니다.

따라서, 예를 들어, 마크 업이 다음과 같을 것이다 :

<div class="col-xs-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="..."> 
    </a> 
</div> 

을 대신하는 미디어 쿼리로, COL-XS-6 COL-XS-12 481px 아래와 같이 동작합니다.