모바일에서 사이즈 자동 조절
본문
아래 코드에서 뭘 추가 해야 모바일에서 사이즈가 자동으로 조절될까요??
왕초보입니다.ㅠㅠ 자세하게 알려주시면 감사하겠습니다!@!!
홈페이지 메인에 유투브영상이 배경으로 깔리는 소스같은데.. 모바일에서 보면 화면이 잘려서 보여서요..ㅠㅠ
<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;
}