안녕하세요 미디어쿼리 관련 질문드리려고합니다.
관련링크
본문
몇일동안 유튜브등 찾아봤는데 도저히 적용방법을 모르겠어서 질문남깁니다..
슬라이더-미디어쿼리 (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; }
}
이런 식으로 화면 픽셀에 따라 나누는 것입니다.
방법이 워낙 여러가지라 미디어쿼리 선언 방법에 대해 알아보시고, 화면 크기를 어떻게 나누는게 최적인지 찾아보세요.
보통은 위에 정도로 해결이 되기도 합니다.
스타일안에 이렇게만 기입하면될까요...?
네
혹시 모바일과 노트북, 피시에서의 사이즈가 다른 세가지버전의 이미지가 필요한가요??