CSS 미디어 쿼리 및 광고

Question

내 응용 프로그램에 Twitter의 부트 스트랩 (반응 형) CSS를 사용하고 있습니다. 내 사이드 ​​바에 배너 광고를 넣고 싶지만 어떤 미디어 쿼리가 활성화되어 있는지에 따라 사이드 바가 다른 너비가되어 내 배너 광고도 다른 너비가 필요합니다.

현재 활성화 된 미디어 쿼리에 따라 배너 광고를 바꿀 것을 제안 하시겠습니까? jQuery를 사용하여 브라우저의 너비 변화를 살펴보고 그런 식으로 바꿀 수 있지만 jQuery 플러그인과 같은 기존 솔루션이 있습니까?

Answer 1

이것은 본질적으로 이미 트위터 부트 스트랩에 내장되어 있습니다. 부트 스트랩에는 .visible- 및 .hidden-이라는 클래스가 있으며, 이들은 phone, tablet 및 desktop과 함께 사용되어 다른 장치의 항목을 표시하거나 숨 깁니다. 당신은 당신이 당신의 자신을 추가 할 수있는 미디어 쿼리에 대한 사용자 정의 CSS의 속성을 설정하고 싶다면, 물론

<div class="ads"> 
    <img class="visible-phone" src="smallest.png"/> 
    <img class="visible-tablet" src="medium.png"/> 
    <img class="visible-desktop" src="large.png"/> 
</div> 

:

당신은 단순히 예를 들어 배너의 X 다른 버전을 포함 할 것이다. 부트 스트랩이이 방법을 사용합니다 :

@media (min-width: 768px) and (max-width: 979px) { 
    .visible-tablet { 
    display: block; 
    } 
    ... 
    .visible-desktop { 
    display: none; 
    }