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

时间:2009-01-07 18:14:44

标签: user-interface

有哪些关于启用Web应用程序以支持多种解决方案的最佳做法?特别是宽屏幕与正常宽高比的分辨率。

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

这当然越来越难以跨浏览器。

有没有人有这个问题的好资源?

5 个答案:

答案 0 :(得分:3)

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

这是一篇很好的文章,解释了不同的布局,包括液体布局。

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

PS。上面提到的网站(maxdesign.com.au)本身就是使用液体布局,因此在阅读文章时请尝试更改浏览器的大小。

答案 1 :(得分:1)

一种快速,简单,相当强大的方法是使用Blueprint960gs这样的框架来布局网站。它们与浏览器无关,因此您无需担心这一点,并且它们使大多数列布局变得非常简单。

他们都致力于为您的内容创建一个900到1000像素宽的固定大小的容器。现在大多数人至少跑1024x768。如果您需要的宽度超过内容的宽度,那么您可能做错了。

〜960px可能不起作用的一个区域是手机......但那是mobile stylesheets的用途,对吗?

答案 2 :(得分:1)

在Opera和Safari(特别是他们的移动版本)中,您可以使用CSS3 media queries,它可以为不同的屏幕分辨率声明完全不同的样式。

可以使用Javascript - Alistapart: Switchy McLayout

在其他浏览器中模拟

答案 3 :(得分:0)

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

答案 4 :(得分:0)

这里有两个选项:

  1. 固定宽度布局
  2. 流程布局
  3. 两者都有利有弊,最终,这是一个设计决定,哪个是最佳选择。