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

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

슬라이더-미디어쿼리 (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/[email protected]/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>