모바일에서 사이즈 자동 조절

모바일에서 사이즈 자동 조절

QA

모바일에서 사이즈 자동 조절

본문

아래 코드에서 뭘 추가 해야 모바일에서 사이즈가 자동으로 조절될까요??

왕초보입니다.ㅠㅠ 자세하게 알려주시면 감사하겠습니다!@!!
홈페이지 메인에 유투브영상이 배경으로 깔리는 소스같은데.. 모바일에서 보면 화면이 잘려서 보여서요..ㅠㅠ

 

<div class="visual_slider" id="visual">
  <div class="main-carousel owl-carousel">
    
    <div>
      <div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=GMZi8EeuOV0" data-speed="1"></div>
        <div class="copy_area_wrap">
          <div class="copy_area">
         </div>
        <p class="cover"></p>
        </div>
    
  </div>
</div>
<script>
$(document).ready(function(){
    $('.main-carousel').owlCarousel({
        items:1,//보여줄 이미지 갯수
        nav:true,
        loop: true,
        autoplay:true,
        autoplayTimeout:9000,
        onTranslate:function(e) {
            $(e.target).find('.animated').removeClass('bounceInDown').css({opacity:0});
        },
        onTranslated:function(e) {
            $(e.target).find('.animated').addClass('bounceInDown').css({opacity:1});
        }

    });
    
    jarallax(document.querySelectorAll('.jarallax'));

});

이 질문에 댓글 쓰기 :

답변 1

<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=GMZi8EeuOV0" data-speed="1"></div>

이 부분의 넙이는 max-width:100% 로 높이는 해상도에 따라서 모두 height:00px 과 같은 방식으로 설정을 해줘야 할 것입니다.

 

css @media 를 사용 합니다.

아래의 샘플을 참고하세요

 

@media all and (min-width:481px){
    height:00px;
}
@media all and (max-width:480px){
    height:00px;
}
@media all and (max-width:391px){
    height:00px;
}

답변을 작성하시기 전에 로그인 해주세요.
전체 1,284
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT