全屏响应式水平网站

Question

我正在尝试寻找最佳方法来创建一个水平的网站，全屏幕，并且如果可能的话是响应式的，最小宽度适用于平板电脑。问题是我还需要使用鼠标滚轮进行水平滚动，但是我发现fullPage.js不支持这一功能，或者至少我无法在该插件上使其正常工作。

无论如何，我需要建立具有全屏显示区块的模板 - 如果有任何提示，我将非常感激。谢谢。

- ilonashu

---

fullPage.js和http://www.minimit.com/articles/code-tips/perfect-responsive-fullscreen-backgrounds这两个库我都试过了，但是我在横向滚动方面遇到了问题，一直没有解决。我尝试了各种方法，但是我的原始CSS并不是全屏的，这里是一个草稿http://jsfiddle.net/E8G9n/。另外，我需要提到的是，每个部分都有不同的背景图片。谢谢。 - ilonashu

Answer 1

水平响应式设计有些棘手，需要投入大量的精力。有很多种设计方法可以实现响应式，这不能只用JSFiddle代码片段来描述。然而，我有一个东西可以帮助你开始“水平响应式布局设计”... 这是必须指南/教程，适合想开始使用水平响应式方法的人们。

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

- Rahul Patil

---

你好，谢谢。我已经知道了 - 我会继续搜索和尝试，总会有办法的 :) - ilonashu

Answer 2

您可以使用以下链接中列出的工具之一： http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/ http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages

或者您也可以将原始js/jquery与锚链接混合使用，并在单击时添加动画。在这种情况下，您可以使用鼠标滚轮向下滚动，并在单击链接时拥有花哨的动画效果。 关于响应性，请使用CSS媒体查询。

- lanlau

---

你好，关于水平滚动，我已经让它可以工作了 - http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/。主要问题是如何将具有全屏图像背景的水平网站响应式地制作成连续的效果，就像使用水平滚动条滚动一样。 - ilonashu