随宽度变化的网站布局？答案

【问题标题】：Web site layout that changes with different widths?随宽度变化的网站布局？
【发布时间】：2014-07-07 00:28:14
【问题描述】：

有谁知道如何根据浏览器宽度完成不同的布局，比如这两个网站？

http://sasquatchfestival.com/

http://css-tricks.com/

我尝试用 Google 搜索它，查看 Stackoverflow 问题，并查看他们的代码，但我认为我遗漏了一些东西。它实际上会根据窗口的宽度重新排列和调整一些元素的大小，但是如何呢？ Javascript？

对不起，如果我的搜索技能失败了，但我不确定要查找什么，这里的“类似问题”似乎不相关，甚至 CSS-Tricks 也没有简单的信息找地方。

【问题讨论】：

您可以对任务使用 javascript 和/或媒体查询。
研究响应式网页设计
媒体查询，就是这么叫的！谢谢大家！

标签： html css responsive-design

【解决方案1】：

您不需要使用 JS 来检测浏览器宽度。您可以简单地使用 CSS 媒体查询来更改布局。

例如：

@media screen and (max-width: 1280px) {
    ... selector(s) here ...
}

仅将 CSS 应用于宽度不超过 1280 像素的屏幕。

另见：

【讨论】：

我正在创建一个网站，并且我刚刚开始使用媒体查询，但在页面加载后看起来并没有动态变化。应该这样吗？

【解决方案2】：

您可以使用 CSS3 媒体查询根据屏幕宽度提供不同的样式。更多信息请看这里：http://www.css3.info/preview/media-queries/

例如，如果您查看 sasquatchfestival.com 网站的 CSS 源代码，您可以看到他们在做什么：http://sasquatchfestival.com/css/screen.css?v=1328828795。搜索“@media only screen”，您会看到它们为 768px 以下、768-1024px 和 1024px 以上的宽度提供了不同的 CSS。

【讨论】：

【解决方案3】：

您可以重新发明轮子，或者仅使用众多可用的响应式框架之一来构建/重建您的网站。我已经使用了“Skeleton”和“Bootstrap by Twitter”他们的框架可以在...
骨架... [http://www.getskeleton.com/][1] 引导程序... [http://twitter.github.com/bootstrap/][2]

我已经使用每个构建站点... 骷髅... [http://72t.net][3] 引导程序... [http://ReactiveWebDesign.net][4]

我仍在尝试决定我更喜欢哪个，但现在引导带似乎提供了更多功能。

【讨论】：

【解决方案4】：

里面可能有点jMasonry，但它看起来也有点像Twitter Bootstrap在rails中提供的，可能值得倾注他们的静态CSS版本来寻找答案。

【讨论】：