jquery - 如何实现这个模板的“响应性”？

Question

我在看这个模板：

http://www.meanthemes.com/theme/daily/photo/

我的网站上会有与此类似的图块，但是我不确定如何开始根据窗口的大小移动图块。我目前正在使用 MeanMenu ( http://www.meanthemes.com/plugins/meanmenu/ )，这对于菜单项来说非常棒，但我不知道如何处理正文。超级新的 HTML/CSS/JQuery - 任何指针都会很棒。

Answer 1

好吧，大多数现代“响应式”网站都使用 CSS 媒体查询来实现它，甚至是您链接到的网站，如果您查看 CSS，您可以看到这一行（以及许多其他行）：

/* This will define the style you want when the screen's Minimum width is 1024px */
@media screen and (min-width: 1024px) {
 /* style here */
}

@media screen and (max-width: 860px) {
 /* style here */
}

这些媒体查询应该可以在大多数现代浏览器中使用，对于那些不支持它的浏览器，您可以参考这个 js来启用它。

有关媒体查询的更多信息，您可以尝试本教程。

Answer 2

操作，

Twitter Bootstrap可能是您正在寻找的。

Bootstrap 可以很好地处理响应式 UI。

Fluid Grid System文档有更多信息和示例，但这里是概述：

流体网格系统使用百分比而不是像素来表示列宽。它具有与我们的固定网格系统相同的响应能力，确保关键屏幕分辨率和设备的适当比例。- 通过引导文档

用户界面/导航栏

除了响应式设计，Bootstrap 还附带了一堆常见的 ui 元素/插件。和 MeanMenu 一样（诚然，我对此一无所知），Bootstrap 也有导航栏。

Plunker，协作在线编辑。

最后，由于您刚刚开始，Plunker是用于原型设计和样板的绝佳工具。这对于与 SO 社区共享代码问题/答案特别有帮助。

我整理了一个Plunk > http://plnkr.co/edit/LF6BCCDam2w67aUwOSaq，其中包括 Bootstrap 以及响应式图像网格和导航栏的示例。

希望有帮助。祝你好运！