html - 自动拟合内容？

Question

我想知道http://staffanstorp.se/如何具有流动内容的能力（我相信这是术语，如果我错了请纠正我）。我也会根据情况更改标签，以便其他人可以在人们有答案时找到这篇文章，因为我发现很难找到任何东西。

无论如何，我一直在寻找一个可能的 jquery 插件来为我做这件事。上面的网站正是我所需要的，非常感谢您的帮助：D

我能找到的唯一事情是对内容进行这种类型的自动调整大小，但仅限于文本，这个网站做了很多！

Answer 1

它是通过结合使用媒体查询和液体 css 布局来完成的。

否则安装 firebug 并开始分析代码 - 一切都在现场。

Answer 2

这是使用 css 文件中的媒体查询完成的。例如

@media screen and (max-width: 1024px){
img {
    width: 400px;
    height: 400px;
    margin-left: -512px; }
}

@media screen and (max-width: 512px){
img {
    width: 200px;
    height: 200px;
    margin-left: -512px; }
}

这个 css 为所有图像提供了规则，当屏幕宽度为 1024 像素或更小时，它们的大小限制为 400 像素，当屏幕宽度为 512 像素或更小时，它们的大小限制为 200 像素。

通过创建适用于不同屏幕尺寸的单独规则，您可以提供这种动态布局。

第二种方法是不以固定的术语定义任何东西。使用 % widths 等将使您的页面适合任何大小，然后您可以使用上面的媒体查询在屏幕变得太小时时移动内容。

希望这可以帮助。