정보실

웹학교

정보실

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;

}

 

페이지 정보

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

웹학교