Html 如果css库大小固定，则使其具有响应性

您好，我正在使用下面的图库代码进行幻灯片放映，我的问题是如何使该图库立即响应大小已固定，但我希望能够使用视口元标记缩小它。这是图库和css的代码

html代码：

<div class="splash_gall">
            <div class="box_gall">
                <div class="hide_photo"></div>
                <div id="viewport">
                    <div class="slider_gall">
                        <ul class="items">
                         <li><img src="img/gall_pic_5.jpg" alt></li>
                         <li><img src="img/gall_pic_6.jpg" alt></li>
                         <li><img src="img/gall_pic_8.jpg" alt></li>
                         <li><img src="img/gall_pic_12.jpg" alt></li>
                         <li><img src="img/gall_pic_7.jpg" alt></li>
                         <li><img src="img/gall_pic_13.jpg" alt></li>
                         <li><img src="img/gall_pic_10.jpg" alt></li>
                         <li><img src="img/gall_pic_9.jpg" alt></li>
                        </ul>             
                    </div>
                </div>
            </div>
        </div>

.splash_gall {
  position: relative;
  position: absolute;
  top: 198px;
  left: 50%;
  margin-left: -510px;
}
.box_gall {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  height: 563px;
}
.hide_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1021px;
  height: 564px;
  background: url('../img/photo_over.png') 0 0 repeat;
  z-index: 3;
  opacity: 0;
}
#viewport {
  width: 1020px;
  height: 563px;
  cursor: move;
  overflow: hidden;
}
.slider_gall {
  position: relative;
  z-index: 2;
  display: inline-block;
  float: left;
  overflow: hidden;
  width: 1530px;
  height: 579px;
}
.items {
  display: none;
}

---

您可以使用css媒体查询，如上所述：

您尝试过媒体查询吗？