• 목록

화면 사이즈, 즉 모바일과 pc 에 따라 반응형으로 배너를 노출시키고 싶을때 2가지 형태가 있습니다..

첫번째는 1개의 배너 이미지로 화면 사이즈에 따라 배너를 연동해서 줄이는 반응형 배너 이고

두번째는 제이커리를 이용해서 화면 사이즈에 따라 준비한 2개의 배너(pc형/모바일혀)을 각각 노출시키는 방식 입니다.

아래 소스는 두번째 방법으로 제가 현재 사용하고 있는 소스로 기록형으로 남깁니다.

제 사이트에 적용해서 잘 나오고 있기 때문에 타 사이트에서 이상반응은 직접 수정하기 바랍니다.

제가 질문에 답변을 드릴 정도는 안됩니다. ^^

[code]

<!-- 배너 사이즈별 다르게 나타내기 -->

<style>

.banner_ad {width:100%; max-width:720px ;margin: 0 auto ; text-align:center;}

.mobile_only { display:none; }

.mobile_only img, .pc_only img { width:auto; max-width:100%; }

@media screen and (max-width: 575px){/*제이쿼리 설정으로 575이하일때 아래 설정이 적용됨*/

.mobile_only { display:block; margin:0 auto; }/*모바일 경우

블록으로 하고 가운데 정렬*/

.pc_only { display:none; }

}

</style>

<div class="banner_ad">

<div class="pc_only">

<a href='https://giftjoa.biz/?ref=mybookmark'><img src="https://giftzone.co.kr/banner/giftjoa_a_970x90.gif" alt="판촉물제작 쇼핑몰 기프트조아"/></a>

</div>

<div class="mobile_only">

<a href='https://giftjoa.biz/?ref=mybookmark'><img  src="https://giftzone.co.kr/banner/giftjoa_a_300x250.jpg" alt="판촉물제작 쇼핑몰 기프트조아" /></a>

</div>

</div>

[/code]