안녕하세요 미디어쿼리 관련 질문드리려고합니다.
몇일동안 유튜브등 찾아봤는데 도저히 적용방법을 모르겠어서 질문남깁니다..
https://jovial-shockley-5cd08c.netlify.app/">슬라이더-미디어쿼리 (jovial-shockley-5cd08c.netlify.app)
이렇게 일단 예시로 만들어놨습니다만 BXslider로 작업하고 안에 이미지가 들어가는데
PC, 노트북, 모바일에서 사이즈가 알맞게 바뀌도록 하고싶은데 미디어쿼리로 어떻게 해야하는지
도저히 이해가 안되네요.. 도와주시면 정말 감사하겠습니다!!!
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>슬라이더-미디어쿼리</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<div class="slider">
<div><img src="1.jpg" width: 100%;
margin:0 auto;></div>
<div><img src="2.jpg" width: 100%;
margin:0 auto;></div>
<div><img src="3.jpg" width: 100%;
margin:0 auto;></div>
<div><img src="4.jpg" width: 100%;
margin:0 auto;></div>
</div>
<style>
img { display: block; margin: 0px auto; }
.bx-wrapper { position:relative;}
.bx-controls-direction { font-size:60px;}
.bx-controls-direction a { position:absolute; top:40%; display:block; width:60px; height:65px; overflow:hidden; transform:translateY(-50%) color:#5a5a5a; font-weight:normal;}
.bx-controls-direction .bx-prev { left:0;}
.bx-controls-direction .bx-next { right:0;}
.bx-controls-direction .bx-prev:before { content:"\e93d"; font-family:'xeicon';}
.bx-controls-direction .bx-next:before { content:"\e940"; font-family:'xeicon';}
.slider { text-align:center; }
.bx-pager { position:absolute; left:0; bottom:0px; width:100%; text-align:center;}
.bx-pager div { display:inline-block; font-size:0; color:transparent;}
</style>
</body>
</html>
답변 2개
.slider { text-align:center; }
를 예로 들어보자면
모바일용
@media screen and (max-width: 768px) {
.slider { text-align:center; }
}
태블릿용
@media screen and (min-width: 769px) and (max-width: 1024px) {
.slider { text-align:center; }
}
pc용
@media screen and (min-width: 1025px) {
.slider { text-align:center; }
}
이런 식으로 화면 픽셀에 따라 나누는 것입니다.
방법이 워낙 여러가지라 미디어쿼리 선언 방법에 대해 알아보시고, 화면 크기를 어떻게 나누는게 최적인지 찾아보세요.
보통은 위에 정도로 해결이 되기도 합니다.
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인