汽车配件内容?

时间:2011-12-16 12:07:22

标签: html resize autoresize liquid-layout

我想知道http://staffanstorp.se/如何具有流动内容的能力(我相信这个词,如果我错了,请纠正我)。我也会按照这样的方式更改标签,以便其他人可以在人们找到答案时找到这个帖子,因为我发现很难找到任何东西。

无论如何,我一直在网上搜索一个可能的jquery插件,它会为我做这个。上面的网站正是我需要的,我非常感谢你的帮助:D

我能找到的唯一的东西已经完成了这种类型的自动调整大小的内容,但只有文本,这个网站做了很多!

2 个答案:

答案 0 :(得分:1)

使用media queriesliquid css layout结合使用。

否则安装firebug并开始分析代码 - 它就在现场。

答案 1 :(得分:1)

这是使用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为所有图像提供规则,以便在屏幕宽度为1024px或更宽时将其大小限制为400px,并在屏幕宽度为512px或更宽时将其限制为200px。

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

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

希望这有帮助。