在没有媒体查询的情况下如何响应

Question

我在 codepen 上浏览纯 CSS 滑块时偶然发现了这个 -> http://codepen.io/dudleystorey/pen/ehKpi

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite; 
}

那么，如何在完全不使用@media 查询的情况下实现响应式设计呢？即使没有提及高度或尺寸，它究竟是如何控制图像的高度的？

Answer 1

很简单，图像的包装器有 500% 宽度 = 100% * numberOfImages。

然后使用 CSS 制作幻灯片，以动画方式显示同一个包装器的位置，每个关键帧 = 100% / numberOfSlides。

高度没有定义，是按比例调整的，根据屏幕的宽度（你看到的20% = wrapper's width / numberOfSlides = 100% of the screen's width）

可以通过指定宽度本身来控制最终图像/容器的高度大小，因为通过这种方法，高度和宽度相互关联。