如何根据浏览器大小动态调整网页大小

Question

我正在查看一些网站并发现有些网站有一个非常好的功能，当您调整窗口大小时，页面上的内容布局会发生变化。

一个真正做到这一点的网站是http://www.kerrang.com，我想知道他们是如何做到的？在此示例中，当您将宽度设置得更小时，它会调整为更加“移动友好”。

我猜它是某种JQuery，但我不确定它们的功能。有谁知道我在说什么？只是一个链接到维基如何将是伟大的，而不是寻找任何人编写任何代码！

Answer 1

查看任何响应式css框架：http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

就个人而言，我会将http://getbootstrap.com用于此类事情

Answer 2

这都是css man，只是使用媒体查询！噗神魔法

body {background-color: blue;}

@media (max-width: 1200px) { body {background-color: red;} }

在这种情况下，当浏览器HAS或IS RESIZED宽度超过1200像素时，背景将为红色。 玩得开心！

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/

编辑：顺便说一下，kerrang网站可能没有显示列和带有文章的列，当窗口大小超过X宽度时，它会增加宽度。

Answer 3

使用twitter bootstrap 3.它是一个首先为移动设计的css框架（最好的）。