我最近一直在思考 屏幕分辨率 以及使用流体宽度网站是如何最好地适应所有访问者屏幕分辨率的。另一种选择，静态宽度网站，必须做出选择。您可以针对 800px 宽度（最低公分母）进行优化，并放弃使用具有更大屏幕的用户提供的数百像素宽度。或者，您可以针对 1024px 进行优化，并让您的 800px 访问者进行水平滚动。在我看来，任何超过 1024px 的宽度对于静态宽度网站来说都太宽了。
我认为最佳方案是创建一个适应所有人的流体宽度网站。以下是我认为“完美”的流体宽度布局
- 适用于所有主要浏览器
- 缩小至 780px
这适应了 800×600 分辨率的用户，无需水平滚动！ - 扩大至 1260px
这适应了 1280×768 分辨率的用户以及介于两者之间的所有用户。 - 这适应了 90% 以上的互联网用户。您可以轻松地使此布局更大，但请注意行长如何影响可读性。没有人想阅读一行 1980px 长的文本。
- 侧边栏与主要内容“等高”
- 对于分辨率更高的用户，页面内容居中。
我开始着手工作，你猜怎么着，我觉得我做到了=)
我相当紧张地称其为“完美”，因为我相信那里的一些天才会挑出一些漏洞并指出我的几个问题。没关系，我希望发生这种情况，因为我准备好了确保它达到标准并达到最佳状态。我在 Firefox、Safari、Opera 和 Internet Explorer 6 中对其进行了测试，并且它在所有这些浏览器中都能正常工作，所以我只是祈祷并发布它。像往常一样，请随意下载并随心所欲地使用。链接总是很棒的。
我喜欢它！
并且可能会在不久的将来使用它。
从查看它可以看出，我唯一能看到的的问题是左侧边栏首先列出。如果将其包含为菜单或其他内容（博客信息、广告等），我可能会建议将内容 div 放在首位，以供屏幕阅读器、不使用 css 的人等使用。
它在 IE7 中也能正常工作。
（顺便问一下，您是否修改了您网站上的设计？)
这是一个极好的观点，侧边栏确实应该在 HTML 中最后列出。由于它只有两个主要部分，并且它们都是 float-left float-right，因此交换它们的位置很容易，并且可能不会影响任何内容。
是的，我调整了一些内容。我开始认为双侧边栏有点太多了，所以我将一些内容移到了页脚。您现在可以在那里找到类别、存档和我的迷你简介。
我认为最好让它缩小到 775px，因为（至少对我来说）780px 会在 Firefox 2.0.0.7 中导致迷你滚动条，而没有任何自定义工具栏等。
每当我为 800 x 600 设计时，我都会将我的网站设置为 775px。
优秀！
您应该写一篇简短的说明，说明它是如何工作的以及 min-width/max-width/expression() CSS 在哪里工作以及在哪里不工作…
坦率地说，这是一个非常简约的设计，可以在任何情况下保持流畅，除非您想要更具吸引力的设计。我过去也做过同样的事情，但是当您开始引入更多数量的模块时，流畅性往往会下降，并且在流体状态下维护它变得越来越复杂。
这就是为什么我坚持认为，与其保持流畅，不如固定到某个分辨率。我想满足 1024 x 768 的分辨率并保持我的布局固定，因为我知道大多数技术人员都会拥有它，并且现在它已成为默认设置。
我不介意它在更高分辨率下不流畅，因为无论如何，如果模块在更高分辨率下开始扩展，使其流畅会破坏其美观性。
嗨，Chris（以及其他提倡 ~800px 最小宽度的人），只想指出许多用户正在使用（并且不愿意放弃）浏览器中的侧边栏，他们也有权不被强迫进行水平滚动，因此最小宽度（如果应该设置的话）必须远小于 800px。同意吗？
@flash：这就是此示例的美妙之处，只需更改 CSS 中的两个简单数字，它就会缩小到 775。780 只是我随机选择的，我认为 20px 足以补偿垂直滚动条，但我以后会使用 775，感谢您指出这一点。
@Wesley Tanaka：好主意，我想我很快就会对此主题写更多内容。简而言之，min-width max-width 在大多数“良好”浏览器中都能正常工作，而表达式内容是使 IE 6 及更低版本浏览器正常工作的关键。
@nitinpal：我知道你的意思，正如你可以在这个网站上看到的那样，我选择保留一个针对 1024px 宽度进行优化的固定宽度网站（主要内容实际上只有 980px，以补偿垂直滚动条等）。确实，该设计相当简约，但我认为您仍然可以使用该模板创建有吸引力的设计。您是否有想要添加到布局中可能会破坏其流畅性的特定示例？
@Jerry：这有点像 flash 在上面提到的。此布局在这方面非常灵活。如果您想让它缩小到 500px 宽度（例如），您可以通过简单地更改 CSS 中的一些数字来轻松做到这一点。
漂亮！
伟大的工作，谢谢 Chris。
我认为最好将所有样式都保留在您的 css 文件中，不要使用内联样式，这会使源代码更大且难看。
干杯
嗨，很好的例子，我同意 CodeAssembly 的观点。
@CodeAssembly & Volkan：是的，我同意 CSS 应该放在它自己的文件中，如果为了代码美观没有其他原因的话。此示例不使用任何内联样式……您只是在“一般”地说吗？
@Chris
CodeAssembly 指的是您用于清除浮动元素的内联样式。我相信一个全局清除类可以解决问题
http://www.positioniseverything.net/easyclearing.html
请随意提出异议，但我认为使用简单的内联样式浮动清除效果更好。我宁愿添加少量额外的标记来避免用（数一数）四个技巧来弄乱我的 CSS 以获得相同的解决方案。
嗨，Chris，
我指的是 WordPress 中著名的名为“Garland”的 3 列主题。您能否使这样的 3 列主题变得流畅，因为我发现 3 列主题最难保持流畅。
干得好。在设计网站时，我不仅考虑台式机，还考虑移动设备。例如，如果您在 iPhone 上查看您的示例流体布局，则在任何模式下都会出现水平滚动条。
您认为将最小宽度修改为大多数移动屏幕的宽度是否会消除水平滚动条？
谢谢
@nitinpai：我相信可以在那里获得另一列而不会损害其流畅性。我能够将一个右浮动列添加到主布局中，您可以 在此处查看。我只是快速地完成了它，因此右侧列的高度并不相等，但您可以将其拉出，甚至可能使用某种“滑动门”技术为其提供背景。
@planner：您绝对可以只修改最小宽度以使设计缩小。在此布局的情况下，左侧边栏背景是使用图像创建的，在这种情况下，图像的固定宽度几乎为 200px。这对于移动设备来说太大了，因此需要进行更改。当然，我用在标题中的图像也必须替换为更适合移动设备的文本。
嗨，
好文章，我们似乎正处于设计网站以适应 1024px 分辨率而不是 800px 的转折点……尽管我们希望我们的网站尽可能地易于访问，但也要使其看起来最佳（在我看来，在 ~775px 处浪费了太多空间）。像上面示例中这样的流体方法可能是克服此问题的最佳方法。
我见过一些设计精美的（不受限制的）流体网站，但在我的显示器（1600×1200 显示屏）上看起来很糟糕，所以我认为拥有一个缩小到 775px 并扩展到 ~999px 的网站将是我们最好的选择……我最近看到的一个很好的例子是新的 John Lewis 网站，http://www.johnlewis.com
谢谢
@Tom：哇，你链接的John Lewis网站是流体宽度的顶级示例。有一些滑动门的效果。我真的很喜欢大多数元素即使保持健康的空白填充，使它们非常易读。唯一不足的是菜单，当你缩小浏览器窗口时会变得有点紧凑。总的来说，非常棒的作品。
非常好，我喜欢整个布局的简洁性。我需要更改什么才能在HTML中将Sidebar div放在main content div下方？
@Dank：谢谢！我能够稍微修改一些东西，以便将sidebar div放在main content div下方，并添加一个右侧边栏。你可以在这里查看示例。
使用表达式有一些注意事项，其中之一是表达式会被多次评估，即使移动鼠标也可能触发它，因此它们很容易减慢网站速度。雅虎开发者建议不要使用CSS表达式，其他人也这样建议。我将坚持使用直接的JS解决方案来设置最小/最大宽度。
JavaScript可能是处理此问题的更有效方法，但对于关闭了JavaScript的访问者来说呢？它是否可以很好地降级为固定宽度？
我个人不同意使用JavaScript方法，据我所知，它只会增加文件/上传大小，而一行CSS最小和最大宽度代码将非常小。
只有IE<=6不理解最小和最大值，因此最好将表达式放在仅IE的样式表中，并使用条件注释提供服务，以便只有使用旧版浏览器的用户才会遇到任何性能下降。
至于最大宽度，最好使用em作为值，以便当用户调整浏览器中的文本大小时，布局可以按比例增大。
你是否有此设计的3列布局，理想情况下边栏大小应是多少？
谢谢
http://itdiscover.com
@John：说得对，这将是隔离IE 6的好方法。我希望很快就能做一个关于使用em进行页面宽度的教程。我看到你的网站非常有效地使用了它们，干得好！
@Web Dev Tools：一段时间前，有人提出了类似的请求，要求添加另一列。我能够在右侧添加一个伪边栏（此处示例）。我没有做得很好，使其看起来很棒，但肯定有可能。我认为我可能会做一个关于使用滑动门之类的东西的另一个教程，以便更有效地使用3列流体宽度侧边栏，并具有等高列。
嗨，Chris，感谢你的支持文章。我真的很喜欢你。你能发布一篇关于如何仔细处理CSS XHTML布局的文章吗？我的意思是所有内容，例如宽度、浮动、ul li等。
无论如何，谢谢。
我建议将Firefox用户的最小宽度更改为775px。
感谢此演示。我一直试图弄清楚流体布局——这解答了我的许多问题。我要去尝试一下！
我尝试了这个——它似乎在我的电脑上运行良好，但一个拥有宽屏显示器的客户说背景没有拉伸到全屏宽度，并且由于某种原因图像没有右浮动。在我的显示器上，一切看起来都很好。你能看看它在你那里的显示效果吗（假设你有一个宽屏）？
http://www.premiumwebsites.net/samples/sports/index.html
临时链接
谢谢
Dotty
@Dorothy：我在大多数主要的优秀浏览器以及IE 6中查看了它。IE 6有一些常规的怪癖，例如异常大的字体大小和菜单中的一些怪异之处，但背景看起来还不错。也许他们指的是“灰色”背景没有拉伸到全屏？
极好的信息，伙计。我已经将我的WordPress网站制作成了全流体宽度。它会根据屏幕布局进行拉伸。
我很快就会使用它来编写我的流体宽度WordPress主题:)！！！
此致,
Samir。
伟大的工作！
我在当前项目中使用此基本布局，并注意到如果边栏比主要内容长，则会出现问题。背景不会覆盖它。
你有什么好的解决方案吗？我所能想到的只是将列包装在另一个div中，这样会粘住。
@Matt：如果你将背景图像从#main-content应用到#page-wrap，那么它将根据需要拉伸边栏。在我的特定布局中，这将使其穿过页眉和页脚，但这仅仅是因为主要的填充是可以解决的，并且可能不适用于你的布局。
很棒的东西。
但我们正在努力进行改进。你知道如何在窗口水平增长时防止左侧栏和主要内容区域之间扩展的空白吗？
抱歉，还应该提到，为了使事情复杂化，我们需要保持左侧边栏的固定宽度。
不错的布局。但是…
示例页面在w3.org上没有通过HTML和CSS验证器。
这可以在不破坏布局功能的情况下修复吗？
@Bert：抱歉那些验证错误...已修复示例和下载。
Chris，感谢你快速回复。HTML现在通过了验证。但是，实时示例页面的CSS验证仍然报告了两个与包含CSS表达式的行的错误。可以修复吗？
不能...这就是IE 6及更低版本尊重最小宽度和最大宽度的因素。但是，你可以将其放入条件样式表中，如果这非常重要，则允许主页面通过CSS验证。
我猜到了，但作为一个CSS新手，我想我会问问。感谢你的解释和解决方法。
关于搜索引擎优化的另一个问题。我在某处读到，如果主要内容div位于标记的顶部附近（在页眉和主要和辅助导航之前），则搜索引擎会获得更好的索引。将你的布局更改为遵循此模式有多困难？
Bert，我不知道我是否太迟了，我刚刚看到这篇文章
只需通过条件注释发送表达式，一切都会很顺利
pab
哇，抱歉拼写错误，还没有喝我的早咖啡...
=)
@nitinpai：只是一个旁注：“Garland”是Drupal主题，已移植到WP。
嗨，
我正在使用以下表达式
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
在我的网站上。
这在Firefox中运行良好，但在IE6中它给了我ActiveX警告。当我在IE6中允许ActiveX选项并尝试调整浏览器大小时，我的浏览器窗口开始冻结，我必须通过任务管理器结束IE浏览器任务
有没有办法解决这种情况？
rick
@Richard：这是否是你正在使用的确切代码行？我知道如果这两个数字相同（例如，它们都是780，而不是782和780），那么它肯定会冻结你的浏览器。但在你的情况下不确定。示例页面是否也会导致你的浏览器崩溃？
嗨，
感谢您的回复。不，示例页面在IE6中不会崩溃。在我的设计中，当调整窗口大小到780/782标记时，窗口就会开始冻结（例如，在IE6中）。基本上，我有一个网站，我用表格、CSS和div代码组合设计而成，但是，设计是固定/静态的，当我在800 x 600的分辨率下查看它时，它就是“滚动”城市。我想要使我的网站设计“流畅”，我很快发现我无法同时兼顾两种设计，即使用表格设计和CSS/div设计，尤其是在处理“百分比”、浮动概念以及与“换行”相关的问题时。因此，我正在研究无表格设计，您的示例似乎符合我的需求。 :)
这是我的基本设计布局
在我的.css文件中，我为我的容器设置了以下内容
Rick
Chris,
嗨，我想我解决了我的问题，只是更改了
width:expression(document.body.clientWidth < 782? “780px†: document.body.clientWidth > 1262? “1260px†: “auto†);
到这个
width:expression(document.body.clientWidth < 782px? “780px†: document.body.clientWidth > 1262px? “1260px†: “auto†);
作为后续问题，我正在阅读此页面上的一些评论，一些评论建议将“字体大小”从像素 (px) 更改为 em。您建议我这样做吗？
如果是这种情况，您是否知道大约有多少像素等于一个 em（大致）？
Rick
不错的演示。我同意您关于为不同屏幕分辨率设置流体宽度的观点。我尝试在 HTML 中将侧边栏移动到内容之后，但似乎不起作用。不知道是否有解决方案。
非常好，我喜欢它。我从css.tricks.com学到了很多东西。
css.tricks.com 正是我想要的：技巧、技能、专业……
谢谢 Chris。
我来自柬埔寨。
流体布局的精彩且有效的示例.. 谢谢..
我建议将Firefox用户的最小宽度更改为775px。
干得好！我一直很欣赏一个网站，我终于意识到他们有一种独特的流体风格方法。访问http://www.HuffingtonPost.com，并注意当您访问时屏幕如何调整其所有列。我从未在其他地方见过这样的实现。我想要它！
您好，先生，
当页面宽度缩小时，如何根据页面大小调整字体和图像的大小？
Anto，最简单的答案是媒体查询（利用“min-width”和“max-width”）。css-tricks 上有很多关于此的文章。希望对您有所帮助。
我完全同意Ed的观点，页面也应该在水平方向上是流动的。希望你能修复这个问题，Chris :-)
Chris，我知道这是一篇旧文章。我喜欢这个布局，但如果您可以（或其他人）澄清一个问题，我将不胜感激。
body {overflow-x: hidden;
}
导致右侧内容在较小分辨率下被截断。这在设计中如何对您有益，以及为什么在响应式设计中这样设置？
谢谢