网站布局随宽度变化而变化？

有谁知道如何根据浏览器宽度完成不同的布局，就像这两个网站一样？网站布局随宽度变化而变化？

http://sasquatchfestival.com/

http://css-tricks.com/

我试着谷歌吧，期待通过＃1的问题，看看他们的代码，但我想我失去了一些东西。它实际上是根据窗口的宽度重新排列和调整一些元素的大小，但是如何？ JavaScript的？

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

来源

2012-04-01 miahelf

您可以对任务使用JavaScript和/或媒体查询。 – rcdmk 2012-04-01 04:17:56

研究响应式网页设计 – SLaks 2012-04-01 04:20:43

媒体查询，这就是它所谓的！感谢大家！ – miahelf 2012-04-01 05:10:58

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

例如：

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

将应用于CSS只对至多1280px宽屏幕。

参见：

来源

2012-04-01 04:27:59 vjvis

我正在创建一个网站，我只是*开始使用媒体查询，但它看起来不像在页面加载后动态更改。它应该吗？ – 2016-10-25 17:50:36

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

来源

2012-04-01 04:16:59 BookOfGreg

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

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

来源

2012-04-01 04:19:06 McGarnagle

可以推倒重来，还是仅仅建立/使用可用的许多敏感的框架之一重建你的网站。我使用了'Skeleton'和'Bootstrap by Twitter'他们的框架可以在...
Skeleton ... [http://www.getskeleton.com/] [1] Bootstrap ... [http ：//twitter.github.com/bootstrap/] [2]

我已经建立了网站使用每个... 骷髅... [http://72t.net] [3] Bootstrap ... [4]

我仍然试图决定我更喜欢，但现在引导带似乎提供更多的功能。

来源

2012-04-01 15:32:41 Gfw

网站布局随宽度变化而变化？

回答

相关问题