html - 如果它具有固定大小，则使 css gallery 响应

Question

您好，我正在使用以下画廊代码进行幻灯片放映，我的问题是如何让这个画廊立即响应，大小是固定的，但我希望能够使用视口(viewport)元标记缩小它。这是画廊的代码和 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>

CSS 代码:

.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;
}

Answer 1

你可以为此使用 css 媒体查询，如解释:http://css-tricks.com/css-media-queries/