内容框根据浏览器大小调整大小

时间:2013-03-13 02:38:13

标签: html css

我一直想弄清楚这个网站是如何做到这一点的。如果您转到[]并调整浏览器屏幕的大小,您会看到中间的主要内容容器随着浏览器大小变小而变小。它是如何工作的?

我正在尝试使用我正在构建的wordpress网站做类似的事情。

谢谢你, AJ

2 个答案:

答案 0 :(得分:2)

主列中的所有堆叠元素的宽度均为65%,这是指其父元素的比例。在这种情况下,这是视口的整个宽度。它们将调整到它们的最小宽度,设置为700px,以及它们的最大宽度,即1920px。非常简单的CSS。

熟悉Firebug和/或Chrome以及Safari的开发人员工具栏。对于从事网站工作的人来说,它们是不可或缺的。

答案 1 :(得分:1)

我相信你指的是它是响应性的。它可能使用CSS @media查询来根据浏览器的分辨率更改站点宽度。

您可以在此处找到更多信息:http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

此外,您的网站不是一个很好的例子,请在此处查看更好的示例: http://mediaqueri.es/