logo标签列表

网页的最佳内容区域宽度是多少？

user-interfaceusabilitywidth
8

网页主内容区域的宽度是否有标准最大值？我想要最大化屏幕空间而不影响可用性。我看到很多网站将宽度限制在980像素或更小。有没有什么建议？

8个回答
4

针对800x600 或 1024x768 分辨率进行定位。

对于800x600分辨率，宽度约为750像素。

对于1024x768分辨率，宽度应为970像素。

3
我假设您提到的980是指包装器宽度。
最理想的解决方案是完全不考虑像素，而是依赖于ems /％和缩放，尽可能地流动，以使您的设计适合小型移动设备，并且您的元素高度不是固定的，而是自动的。例如：http://www.456bereastreet.com/ 但是，如果您被困在仍然认为像素的网页设计师中，并且您确定无法让他们尝试制作液体/流体图像，我建议您的宽度为960个像素，这样您就有足够的视觉空间在1024x768中，在IE6 / XP中滚动条，但这实际上取决于您的受众和大多数受众的屏幕分辨率。
不幸的是，该网站大部分使用像素进行设计，因此切换到ems不是一项容易的任务，尽管我同意这将是一个更好的解决方案。目前，我认为选择960像素宽度可能是最好的短期修复方法，长期逐渐转向更流畅的布局。感谢您的建议和链接！ - Kevin Babcock
如果单位是 em，那么一个好的最大宽度值是多少，以 em 为单位测量？ - ChrisW
@ChrisW webtypography.net 建议每行字符数为 45-75。我在我的网站上尝试了 max-width: 70em;，效果非常好。 - DaveGauer
3

研究表明，人们阅读长篇文章时会更加困难，这也是为什么我限制内容宽度在800像素左右的原因。具体研究可参考此处。

"long"的定义因人而异。 - user151323
2
是的，但研究表明，大约70个字符是眼部疲劳出现之前的最大允许数量。 - Jacob
有趣的文章。感谢您提供链接和建议！ - Kevin Babcock
很遗憾，您的链接已经失效。我找到了新链接，但是全文链接也已经失效。我的搜索结果指向这里，但需要订阅才能查看。最终，我发现这个链接非常有用。 - Raam Dev
1

你必须先问自己一个问题：我的受众是谁？

不是我想要的答案，但因为你是唯一指出这个重要点的人，所以加一分。谢谢！ - Kevin Babcock
1

在PDA/智能手机/上网本/智能书/信息亭等设备日益普及的时代，不存在“标准”，尤其是在编程方面。虽然听起来老生常谈，但最好的方法是设计一个流布局，而不依赖于确切的屏幕尺寸。

当然，答案可能会根据您预期的用户群体而有所不同（例如，假设1024像素的屏幕宽度，留下980个工作像素，并有意识地决定您不想支持任何小屏幕分辨率的用户）。

另一种解决方案是通过将其变成类似于门户的方式允许大小布局自定义，使用户控制portlet的布局（如My Yahoo）。

我认为采用最大宽度（~980像素）是个好主意，因为我们的大多数用户都是使用台式机和中大尺寸显示器的企业客户。感谢您的反馈！ - Kevin Babcock
1

960 是一个相当常见的标准，这个数字背后的理由是适合在 1024 像素宽的屏幕上显示内容，可以让大多数用户无需滚动即可查看。请参考 此处，其中有数百个网站提供浏览器和用户系统能力统计数据，以获得一些初步的灵感。

但最终，你需要了解你的客户群体的结构 - 如果你的网站面向 iPhone 用户，那么针对 1024 像素宽的屏幕可能不是明智的决定。

有趣的统计数据。有趣的是，小于1024x768的屏幕尺寸的用户不到10％。当然，这些统计数据应该带着一定的保留态度。w3schools.com从他们的用户那里获取统计数据，我想这些用户主要是开发人员。开发人员往往拥有比普通用户更高端的系统，而普通用户可能被困在笔记本电脑或旧/较小的显示器上。我想这一切都归结于确定您的受众。我很想看到来自Google、Facebook、Yahoo！等网站的统计数据，这可能更能代表整个互联网用户。感谢提供链接！ - Kevin Babcock
0

关于绝对像素值我不太确定，但有一件事情我会确保的是文本列不要太宽。超过一定数量的字符会影响阅读理解。

0

我使用1000像素的宽度，适合现今最小的1024x768分辨率，无需在浏览器底部添加水平滚动条。

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