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 */
}

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

有关媒体查询的其他信息，您可以试用此tutorial。

Answer 2

OP，

Twitter Bootstrap可能就是你要找的东西。

Bootstrap很好地处理响应式UI。

流体网格系统 doc有更多信息和示例，但这里是概述：

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

UI /导航栏

除了响应式设计外，Bootstrap还附带了许多常见的ui元素/插件。就像MeanMenu一样（诚然，我对此缺乏了解），Bootstrap确实navigation bars。

Plunker，协同在线编辑。

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

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

希望有所帮助。祝你好运！

如何实现此模板的“响应性”？

2 个答案:

Bootstrap很好地处理响应式UI。

UI /导航栏

Plunker，协同在线编辑。