网页的最佳绝对宽度是多少?

27
假设流体布局不是一个选项(因为那是完全不同的讨论),那么网站布局的推荐宽度是多少?不同尺寸的优缺点是什么?
10个回答

40

我一直使用960px,因为它可以在1024x768的分辨率下查看,并且可以被2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320和480整除...所以我可以使用三分之一的规则来清晰地分割我的网站设计。

几年后进行编辑: 如果您无法使用流体布局,请考虑使用CSS媒体查询使您的内容适应现在存在的众多设备。我不确定是否可以在2012年声称有一个像素宽度可以支配所有设备。


我也同意这个观点,但你应该查看一下你的网站统计数据,了解哪种浏览器在你的访客群中更为普遍。 - Dan

15

查看http://browsersize.com,获得关于用户现在使用的屏幕分辨率的快速统计数据。你可以使用http://setmy.browsersize.com快速调整浏览器大小,以模拟在特定屏幕分辨率下查看您的网站。确保您的布局至少满足最广泛使用的屏幕分辨率(1024 x 768)。

此外,并不一定要占用最大的水平空间。理想情况下,文本的宽度(每行单词数)不应超过某个可用性阈值:

在非常常见的1024×768屏幕分辨率下,大多数固定布局的网站未使用其内容左右两侧的所有可用空间。灵活布局更好地利用了水平空间,但难以维持可用的行长度。可用性专家告诉我们应该在一行上放置的字数是有限的。8到12个单词似乎是理想的行长度。印刷媒体,尤其是报纸,毫不犹豫地使用甚至更短的行。为什么?因为他们可以通过将文本布局在多个列中来实现。

http://www.alistapart.com/articles/css3multicolumn


1

我投票在这里分开讨论。仅仅因为屏幕尺寸是X,并不意味着X或任何接近它的设计都是您网站的最佳选择。

您网站的目的与您选择的宽度有很大关系。

许多营销专家认为,更窄的列可以将更多的访问转化为销售。也许这是因为如果页面较窄,更容易引导人们的注意力。

另一方面,一个专门用于图像的网站应该以每个访问浏览器的最佳可用分辨率显示。


1
  1. 请记住,统计数据中引用的监视器分辨率并不一定等同于浏览器窗口的内部宽度。用户可能会有额外的侧边栏/工具栏,使用非最大化的浏览器窗口。屏幕越大,您就越不希望将其全部用于一个页面。

  2. 过长的文本行更难阅读。最佳长度为25-30em(取决于许多因素,但您不应该简单地选择最大值)。

  3. 移动浏览器具有用于缩放的“虚拟”屏幕分辨率,在Opera Mini/Mobile和Mobile Safari中约为960像素。


1

如果您使用的固定宽度比最小屏幕更宽,那么可能会访问您的网站,您将会使用户感到恼怒和沮丧,因为他们需要横向滚动才能查看其余内容。


1

曾经,网页宽度一般为800px;然而,越来越多的网站开始使用1000px。这是由于访问者的低端分辨率通常为1024x768。额外的24个像素留给浏览器的工具栏、填充和边距等你可能想要操作的空间。

仅仅为了提供一些视角,即使是新一代的小型笔记本电脑也有1024x768的分辨率。

但最重要的是,像@warren建议的那样,了解你的受众并利用它。


1

我也使用950到980像素之间的布局,并且始终居中,除非客户有其他要求 :)


0

当涉及到台式机和笔记本电脑时,为了实现最佳性能和跨监视器兼容性,网站的最大宽度应为960像素。

有关详细信息,请参阅以下文章:

屏幕尺寸和分辨率


0

你可以尝试开发多个布局,并使用Javascript根据访问者的window.innerWidth切换它们。

话虽如此,我通常使用950px到980px之间的大小。


最好使用媒体查询而不是JavaScript——JavaScript不是处理布局的最佳选择。 - gsziszi

-1
根据这些统计数据,最小宽度为1024像素将覆盖大多数用户。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接