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

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

QA

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

답변 1

본문

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

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

 

<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;
}

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,284
© SIRSOFT
현재 페이지 제일 처음으로