정보실

웹학교

정보실

css 반응형 사이트에서 광고블럭 처리 방법

본문

CSS 프레임워크를 사용하지 않는 반응형 사이트에서 광고블럭을 처리하는 방법입니다.

 

HTML :

<div class="ad_big">728px Ad</div>

<div class="ad_medium">467px Ad</div>

<div class="ad_small">300px Ad</div> 

 

CSS : 

.ad_big,.ad_medium,.ad_small{ padding:5px;margin:5px; }

.ad_medium,.ad_small { display:none; }

 

/* Ads devices */

@media (min-width: 478px) and (max-width: 738px) {

.ad_medium{

display: block !important;

}

.ad_big,.ad_small {

display: none;

}

}

 

@media (min-width: 325px) and (max-width: 477px) {

.ad_small {

display:block !important;

}

.ad_big,.ad_medium {

display: none !important;

}

 

}

@media (min-width: 0px) and (max-width: 324px) {

.ad_small {

display:block !important;

}

.ad_big,.ad_medium {

display: none !important;

}

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 224회 ]  작성일15-05-13 13:18
css

웹학교