안녕하세요 미디어쿼리 관련 질문드리려고합니다.

안녕하세요 미디어쿼리 관련 질문드리려고합니다.

QA

안녕하세요 미디어쿼리 관련 질문드리려고합니다.

답변 2

본문

몇일동안 유튜브등 찾아봤는데 도저히 적용방법을 모르겠어서 질문남깁니다..

 

슬라이더-미디어쿼리 (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; }

}

 

이런 식으로 화면 픽셀에 따라 나누는 것입니다.

 

방법이 워낙 여러가지라 미디어쿼리 선언 방법에 대해 알아보시고, 화면 크기를 어떻게 나누는게 최적인지 찾아보세요.

 

보통은 위에 정도로 해결이 되기도 합니다.

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