建议的网站分辨率（宽度和高度）？[关闭]

通用网站解析是否有任何标准？

我们针对的是较新的显示器，也许宽度至少为1280px，但高度可能会有所不同，并且每个浏览器的工具栏高度也可能不同。

有什么标准吗？

这些天的建议是：

优化为1024x768。对于大多数网站，这将覆盖大多数访问者。大多数日志显示，您访问的92-99％将超过1024宽。尽管1280越来越普遍，但1024上还有很多，而有些则更低。为此进行优化，但不要忽略其他。

1024 =〜960。考虑到滚动条，窗口边缘等，意味着1024x768屏幕的实际宽度约为960像素。一些工具基于略小的尺寸（约940）。这是twitter bootstrap中的默认容器宽度。

不要为一种尺寸设计。窗口大小各不相同。不要假设屏幕尺寸等于窗口尺寸。设计一个合理的最小值，但假设它会调整。

使用响应式设计和流畅的布局。使用在调整窗口大小时将调整的布局。人们经常这样做，尤其是在大型显示器上。这只是CSS的好习惯。有几个支持此功能的前端框架。

把手机当成一等公民。您一直都在从移动设备获得更多流量。这些会引入更多的屏幕尺寸。您仍然可以针对960进行优化，但是使用自适应Web设计技术意味着您的页面将根据屏幕尺寸进行调整。

记录浏览器显示信息。您可以获得有关此的实际数字。我在这里，这里和这里找到了一些数字。您还可以绑定网站以收集相同的数据。

用户将滚动，所以不必太担心高度。一个古老的论点是用户不会滚动，任何重要的事情都应该“超越一切”。这在几年前就被推翻了。用户滚动很多。

有关屏幕分辨率的更多信息：

• 屏幕分辨率和页面布局
• 设计网站的最佳屏幕分辨率
• 针对浏览器尺寸的设计-不是屏幕尺寸

有关响应式设计的更多信息：

• 响应式网页设计（2010年5月25日），Ethan Marcotte，A List Apart。
• 维基百科的响应式网页设计
• 多设备布局模式（2012年3月14日），Luke Wroblewski。为可适应的多设备屏幕布局编录最受欢迎的样式。

用于响应式设计和布局的工具和前端框架：

• Twitter的引导
• 祖尔布基金会
• 用于响应式网页设计的50个出色工具（2012年4月24日）Denise Jacobs和Peter Gasston

我相信这是个坏主意。将内容与布局分开的全部目的是使您的网页可以在任何类型的浏览器上显示。

设置人为的限制（例如最小屏幕尺寸）将限制您的市场。

话虽如此，我相信每个桌面都应该能够显示1024x768。但是，在iPhone或其他受屏幕挑战的设备上运行的浏览器又或者是那些不将整个桌面用于浏览器的浏览器呢？

回答您的特定问题，不，我认为浏览器的最小或通用显示区域没有任何标准。

强迫用户水平滚动是严重的UI违规。除非您专门为屏幕大小已知的人群构建网站，否则，最安全的做法是确保您的设计可以在800像素以下的小屏幕上正常工作（如果没有记错的话，大约占网络浏览人口的8％）。使它很好地适应较大的屏幕是明智的，但不要以仍然以800x600冲浪的速度为代价。

这也是要考虑的另一件事：并非每个人都以全屏模式运行其浏览器（我没有）。因此，出于多种原因，是否可以针对特定（较大）的“屏幕尺寸”进行设计的想法实际上行不通。

2010年12月15日更新：当我第一次回答这个问题时，800像素是一个合适的答案。但是，在这一点上，我建议您使用1024像素宽（或其他人指出的960像素）。科技在前进...

以下是2008年浏览器显示的统计信息：http : //www.w3schools.com/browsers/browsers_display.asp

大约50％的用户仍在使用1024x768。如果您希望网站在高分辨率下看起来不错，请使用灵活的布局。

实际上有宽度的行业标准（至少根据yahoo）。它们支持的宽度为750、950、974、100％

这些宽度的预定义网格（列布局）具有很多优点，如果您要包含广告，则可以与广告的标准尺寸很好地配合使用。

有趣的谈话也值得一看。

见YUI基地

这是一个很棒的工具：Google Labs Browser Size

我要说的是，您应该只期望用户拥有800x600分辨率的显示器。加拿大政府的标准将其列为要求之一。尽管对于配备花哨的宽屏显示器的人来说，这似乎很低，但是请记住，并非每个人都有一台不错的显示器。我仍然知道很多人以1024x768运行。遇到以800x600运行的用户，尤其是在旅行时在便宜的网吧中运行，并不少见。另外，如果您不想让浏览器窗口全屏显示，那也是很好的选择。您可以在更宽的显示器上使站点更宽，但不要使用户水平滚动。曾经 支持较低分辨率的另一个优势是，您的网站可以在手机上运行，​​而任天堂Wii则容易得多。

关于至少1280宽的注释，我不得不说这太过分了。大多数17甚至我的19英寸非宽屏显示器仅支持1280x1024的最大分辨率。我现在输入的14英寸宽屏笔记本电脑只有1280像素。我要说的是，您应该争取的最大最小分辨率是1024x768，但是800x600是理想的选择。

到目前为止，所有答案都涉及台式机显示器，但是我在iPhone上使用堆栈溢出，我认为您不应该通过定位1024或1280水平像素来排除任何移动平台。标记您的页面，使浏览器知道它的全部含义，并且即使在您没有想到的屏幕阅读器和其他工具包上，也可以免费使用。

最好不要针对任何特定分辨率，而要轻松适应许多不同的分辨率。

我们使用的指南似乎已被广泛使用，并得到了Google Analytics（分析）提供的数据的支持，目的是设计网站，使其能够在宽1024像素，高768像素（1024x768）的屏幕上工作和1280x800是我们看到的最常见的分辨率，至少占所有流量的70％）。

这就是为什么您看到许多站点（包括此站点）使用的中心列大约为1000像素，而最重要的内容位于顶部500-600像素，因此在这种尺寸的屏幕上查看时，它位于折叠的上方。

在最大约1680像素的屏幕尺寸上使用1000像素宽的布局效果很好（通常与在笔记本电脑上看到的一样大，除了17英寸的大屏幕除外），但是在1920像素上确实显得有些愚蠢宽（高端计算机，通常是工作站），但是这些高分辨率并不能占据普通互联网上的大部分流量-2％或更少（另一方面，如果您有像本网站这样的专业受众，高分辨率的数字可能会更高）。

尽管最佳宽度可能是1024，但是您必须根据各种浏览器设置（导航工具栏，书签工具栏，状态工具栏等）和任务栏设置来调整高度。它将768快速降到550左右。

无论您的目标浏览器大小是多少，请确保为上述浏览器工具栏，状态栏和滚动栏留出空间。Internet Explorer（IME）在工具栏和状态栏中通常具有超过100px的垂直空间。通常，如果我要以1024 x 768拍摄，为了安全起见，我会尝试创建大约960-980px宽和600px高的设计。这样，您就可以在必要时适应滚动和一些不错的空白（如果设计需要）。对于需要定位特定尺寸的实例，我强烈建议使用YUI网格：

YUI网格

我从设计师那里得到了很多疑问，不仅是宽度，还有什么高度才能“将所有东西保持在折痕上”。这是我最近给的一个答案-

对于宽度，我不是设计师，但我读到960px宽度是当今的发展之路，因为它很容易被分成看起来不错的列，并且非常适合大多数显示器。如果可以的话，设计一个流畅的布局-但这并不总是可行的，这取决于您的设计师，您的CSS技能，图像和文本量。

（您总是希望每行包含65-80个字符，行高大约为1.15）。这是文本的最佳列宽，并且已经证明，与非常宽或窄的列相比，它的读取速度快得多且令人愉悦）

至于“首屈一指”，我只需要警告不要在网络上使用任何此类概念。可以并且应该避免水平滚动，但是垂直滚动是您不能100％避免的事情。我只能告诉您的是，在1024x768的显示屏上（至少95％的用户具有该像素或更高），您应该可以使用固定的600px高块。但是有很多不同的显示格式，浏览器镶边可能会占用很多空间，而且并不是每个人都能最大化浏览器窗口。

这里有一些其他网站或多或少都说同样的话-但要计划让所有人都“完全掌握”绝对是困难的，因为根据实际统计，那时您可能只有400px左右。

最后是一篇长篇文章，内容非常详尽（我会发更多帖，但我说我太菜鸟了）- 如何设计浏览器尺寸-baekdal.com

我个人一直将最大宽度固定为1000px，居中于页面中间（通过左/右页边距：自动）。

如果您运行的分辨率小于1024x768，则该进行升级了。说真的 快到2010年了。您可以购买本机分辨率为1280x1024的廉价bin液晶显示器。

我建议您看看媒体查询。这是CSS的一个有用的新添加，确实意义非凡，您想知道为什么以前没有实现它。基本上，它允许您直接通过CSS定位浏览器属性（例如最大宽度和最小宽度），并从那里分支布局代码。与创建打印样式表相似，您可以在同一文件中并行创建桌面布局和移动布局，从而为开发提供了帮助。

灵活的或液体的布局确实会略微限制设计，例如，如果您使用的背景图像必须与主体背景图像匹配。

我宁愿为网站制作不同的CSS布局，并根据用户的分辨率来应用它们，或者如果不可能（尚未进行深入研究），使其成为可选择的选项。

好吧，我在这里看到很多错误信息。对于初学者来说，使用一定的分辨率（例如800x600）创建网页时，只能使用该分辨率正确渲染该页面！当同一页面显示在其他人的笔记本电脑或家用PC显示器上时，该页面将以该屏幕的当前分辨率显示，而不是您在设计页面时使用的分辨率。不要为一种特定的分辨率创建网页！有太多不同的纵横比和屏幕分辨率，以至于无法实现“一种尺寸适合所有人”的情况，而这种情况在Web设计中是不存在的。解决方案如下：使用CSS3 Media Queries创建可适应分辨率的代码。这是一个例子：

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

看，我们刚才所做的是指定3组以不同分辨率渲染的样式。在我们的示例中，如果屏幕的分辨率大于800px，则将执行1024的CSS。同样，如果显示内容的屏幕为1224px，则将执行1280，因为1224大于1024。我正在处理的站点现在可以在800x600至1920x1080的所有分辨率下运行。要记住的另一件事是，并非所有具有相同分辨率的显示器都具有相同大小的屏幕。您可以将15.4台笔记本电脑并排放置，虽然两者外观相同，但分辨率却可能大不相同，因为在不同的LCD屏幕上并非所有像素的尺寸都相同。因此，请使用媒体查询，并开始使用具有高分辨率（尤其是1280+）的笔记本电脑屏幕创建您的网站。也，在笔记本电脑上使用不同的分辨率创建每个媒体查询。您可以使用Windows中的分辨率设置来向下调整800x600并在该分辨率下创建媒体查询，然后切换到1024x768并在该分辨率下创建另一个媒体查询。我可以继续下去，但是我认为你们应该明白这一点。

更新：这是使用媒体查询的链接，这将有助于解释更多 关于带有媒体查询的移动设备的创新Web设计

该教程将向您展示如何针对所有设备进行设计。还有专门针对媒体查询的教程。我开发了整个网站，以在所有设备，所有屏幕和所有分辨率下使用子域而不是CSS进行渲染！我仍在为平板电脑和智能手机提供支持。该网站可在任何笔记本电脑或50英寸液晶电视上完美呈现，并且许多页面在所有移动设备上均可完美显示。如果将所有代码都放在页面上，那么页面加载速度将很快！另外，请务必注意该文章中有关CSS“ background-size：cover;”的讨论。或“包含”属性，它们将使您的背景图形流畅并能够在所有分辨率下完美呈现。

遵循站点教程，您可以制作一个可以呈现所有内容的网页！

尝试将1024作为最小宽度。尝试一下它在800的外观，但是不要太费神地使它起作用。在800x600的分辨率下，几乎所有主要网站都无法正常工作，因此以这种分辨率工作的人们总是会遇到问题。

如果您要使用液体布局，请确保文本不会太宽，因为当行太长时，它们将变得难以阅读。这就是大多数网站的宽度固定的主要原因。

我的目标是1024个像素的显示器（但不要使用该空间的100％）。我已经放弃了使用800x600分辨率的图像。我宁愿用过时的硬件来惩罚少数人，如果需要的话，使它们滚动，而不是浪费空间来用新设备惩罚每个人。

我想这取决于您的受众群体以及您应用程序的性质。

最终，这不是标记的标准或最佳做法，而是了解您的受众并确保您的网站能够实现您想要的功能。

考虑浏览器视口的宽度而不是屏幕分辨率更重要-您不能假设显示器上的每个像素都将分配给浏览器（即使是像素，也必须减去浏览器镶边）。如果您有权访问报告浏览器宽度的分析（nb浏览器宽度，而不是屏幕分辨率），请特别注意。

尝试容纳尽可能多的视口是很好的选择，但有一些限制。有些挑战可以使用CSS媒体类型处理，有些则不能。有些可以用流畅的布局处理。但是可变的布局不能在所有情况下都起作用，这取决于要显示的信息类型，行长，阅读舒适度等。某些可变的布局在宽屏显示器中不起作用。尺寸小于特定宽度等时，大多数会断裂。

正如我个人希望为约960像素及以上的视口设计的那样，您不能总是这样做。因此，在某些情况下，对于小于等于760像素左右的视口（最大显示800像素的显示屏）进行设计仍然是最安全的-尽管我们终于可以一劳永逸地抛弃这一局限了-至少在台式机上-很快就到了。

在转换是个问题的情况下-并且您使用固定宽度的布局-最好有一个精明的理由，将用户需要单击的任何内容放入收银机，使其在760号以东的任何地方“ ka-ching”像素。

同上用于主导航。

最后，在可以动手的所有方面测试布局。大。小。桌面。手持式。作品。没有替代品。

我只是从我可以访问的所有客户端站点中采样了屏幕分辨率，其中包括超过8个行业的20多个站点，结果如下：
替代文本http://unkwndesign.com/so/percentScreenResolutions.png
基于此，我要确保在1024x768上看起来不错，因为从长远来看，这是大多数。同样不要太担心高度，但是，请避免使用默认字体大小使大多数页面多于1-2个打印页面，大多数人不会阅读那么长的页面，并且如果用户安装了占用大量时间的工具栏垂直空间，我个人的偏好是这是他们的问题，但我认为这没什么大不了的。

*请注意，由于舍入，该百分比总计为100.05％。

请记住，分辨率越高，上网浏览器最大化的可能性就越小。

有些浏览器也有侧边栏。

这取决于您要渲染的内容，但是我会使用可变宽度的布局，该布局不会在大约800-900的宽度处折断。

身高确实不是问题。

sbeam说，“您总是希望每行有65-80个字符”。那是不对的。例如，维基百科每行可能有180个字符。还是要成为一个特定的网站？