带有传送带的简单响应式布局

Question

我正在尝试提出一个响应式布局，并且似乎在转圈！ 任何人都可以向我指出一个好的教程或一些示例的方向来尝试实现此目标...

中央皮带将用于水平旋转木马，最大高度为500px。 徽标和页脚将分别为100px。

在平板电脑或移动设备上查看时，我只希望它看起来像在台式机上一样，并带有徽标和页脚，并且中央表带更小了。

有人可以帮忙吗？

Answer 1

我建议使用Bootstrap-它们具有一些非常易于使用的样式，可帮助您根据需要设计网站。

Answer 2

这样的事情实际上很容易实现！

看看我整理的这个快速Codepen： http ://codepen.io/seanwash/pen/eKjnz/

基本上，您可以在滑块的容器上设置最大高度，以确保其高度不超过500像素。 通过在图片上设置max-width: 100% ，我们确保滑块会随着浏览器缩小而缩小。

对于响应式滑块，我会检查一下类似http://www.woothemes.com/flexslider/的内容，因为它开箱即用。 我本人已经使用Flexslider多次，并且效果总是很好！

Answer 3

如果您不想自己制作滑块，而直接使用它，则可以使用iview和flex滑块以及许多其他工具。