在 Web 应用程序中支持多种分辨率的最佳实践是什么？答案

【问题标题】：What are some best practices to support multiple resolutions in a web application?在 Web 应用程序中支持多种分辨率的最佳实践是什么？
【发布时间】：2009-01-08 02:38:40
【问题描述】：

在使 Web 应用程序支持多种分辨率方面，有哪些最佳做法？特别是宽屏与正常宽高比的分辨率。

似乎没有一个简单的答案 - 除了简单地支持一些固定分辨率并使用一些绝对定位来使布局正常工作。

当然，跨浏览器变得更加困难。

有人有这个问题的好资源吗？

【问题讨论】：

标签： user-interface

【解决方案1】：

您始终可以尝试使用 流式布局 结构，其中元素的宽度与浏览器窗口的宽度成比例。

这是一篇很好的文章，解释了不同的布局，包括流式布局。

http://www.maxdesign.com.au/presentation/liquid/

PS。上述网站 (maxdesign.com.au) 本身使用的是流式布局，因此请在阅读文章时尝试更改浏览器的大小。

【讨论】：

【解决方案2】：

一种快速、简单、相当稳健的方法是使用像Blueprint 或960gs 这样的框架来布置网站。它们独立于浏览器，因此您无需担心这一点，而且它们使大多数列布局变得非常简单。

他们都致力于为您的内容创建一个宽度在 900 到 1000 像素之间的固定大小容器。如今，大多数人至少以 1024x768 的分辨率运行。如果您需要比内容更大的宽度，那么您可能做错了。

~960px 可能不起作用的一个领域是手机……但这就是 mobile stylesheets 的用途，对吧？

【讨论】：

【解决方案3】：

在 Opera 和 Safari（尤其是它们的移动版本）中，您可以使用 CSS3 media queries，它可以让您为不同的屏幕分辨率声明完全不同的样式。

这可以在其他浏览器中使用 Javascript 进行模拟 - Alistapart: Switchy McLayout

【讨论】：

【解决方案4】：

您也可以使用百分比来设置宽度和高度，但这有时也很困难。

【讨论】：

【解决方案5】：

你有两个选择：

固定宽度布局
流式布局

两者都有优点和缺点，最终，哪个是最佳选择是一个设计决定。

【讨论】：