推荐的网站分辨率（宽度和高度）？

Question

常见的网站分辨率有什么标准吗？

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

这有什么标准吗？

Answer 1

我建议你看看媒体查询。 这是 CSS 的一个有用的新补充，确实非常有意义，您可能会想知道为什么它没有更早地实现。 基本上，它允许您直接通过 CSS 定位浏览器属性（例如最大和最小宽度），并从那里分支您的布局代码。 与创建打印样式表类似，您可以在同一文件中并行创建桌面和移动布局，这对开发来说非常有利。

Answer 2

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

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

Answer 3

好吧，我在这里看到很多错误信息。 对于初学者来说，使用特定分辨率（例如 800x600）创建网页，可以使该页面仅使用该分辨率正确呈现！ 当同一页面显示在其他人的笔记本电脑或家用电脑显示器上时，该页面将使用该屏幕的当前分辨率显示，而不是您在设计页面时使用的分辨率。 不要为一种特定分辨率创建网页！ 有太多不同的长宽比和屏幕分辨率，无法期望“一刀切”的情况，而网页设计并不存在这种情况。 解决方案如下：使用 CSS3 媒体查询创建分辨率自适应代码。 这是一个示例：

@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 并在该分辨率下创建另一个媒体查询。 我可以继续说下去，但我认为你们应该明白我的意思。

更新：这是使用媒体查询的链接，这将有助于解释更多信息，
具有媒体查询的移动设备创新网页设计

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

按照网站教程，您可以制作一个可以在所有内容上呈现的网页！

Answer 4

我们使用的指南似乎被相当广泛地使用，并得到了我们从 Google Analytics 获得的数据的支持，它是设计网站，使其能够在 1024 像素宽、768 像素高 (1024x768) 的屏幕上运行。 1280x800 是我们看到的最常见的分辨率，至少占所有流量的 70%）。

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

使用 1000 像素宽的布局在宽度高达约 1680 像素的屏幕尺寸上效果相当好（通常与您在笔记本电脑上看到的高度一样高，除了大型 17 英寸笔记本电脑），但在 1920 像素上看起来确实有点傻宽的（高端计算机，通常是工作站），但是这些非常高分辨率并不占一般互联网流量的很大比例 - 2% 或更少（另一方面，如果您有像本网站这样的专业受众，高分辨率的数字可能会更高一些）。

Answer 5

尝试将 1024 作为最小宽度。 尝试一下它在 800 下的样子，但不要太费心去实现它。 在 800x600 下，几乎所有主要网站都无法运行，因此在该分辨率下工作的人无论如何都会遇到问题。

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

Answer 6

我的目标是 1024 像素显示器（但不使用 100% 的空间）。 我已经放弃那些 800x600 的了。 我宁愿用过时的硬件惩罚少数人，让他们在需要时滚动，而不是用新设备惩罚每个人，浪费空间。

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

Answer 7

最终，这不是标记标准或最佳实践的问题，而是了解您的受众并确保您的网站按照您的意愿行事。

考虑浏览器视口的宽度而不是屏幕分辨率更重要——您不能假设显示器上的每个像素都将分配给浏览器（即使是这样，您也必须减去浏览器镶边）。 如果您可以访问报告浏览器宽度（nb浏览器宽度，而不是屏幕分辨率）的分析，那么请密切关注。

尝试适应尽可能广泛的视口是件好事，但也有一些限制。 有些挑战可以通过 CSS 媒体类型来处理，有些则不能。 有些可以通过流体布局来处理。 但是，流体布局无法在所有情况下工作，具体取决于要显示的信息类型、行长、阅读舒适度等。某些流体布局不适用于宽屏显示器。 大多数情况下，当尺寸低于特定宽度时，等等

尽管我个人很想为约 960 像素及以上的视口进行设计，但你并不总是能做到。 因此，在某些情况下，设计视口 <= 760 像素左右（800 像素宽显示，最大化）仍然是最安全的——尽管我们最终可以一劳永逸地摆脱这个限制——至少对于桌面来说—— - 正在快速接近。

如果转换是一个问题——并且你有一个固定宽度的布局——你最好有一个很好的理由来放置用户需要点击的任何内容，以便收银机在第 760 号以东的任何地方“ka-ching”像素。

主要导航也是如此。

最后，用你能得到的一切来测试你的布局。 大的。 小的。 桌面。 手持式。 作品。 没有替代品。

Answer 8

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

*请注意，由于四舍五入，百分比加起来为 100.05%。

Answer 9

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

有些浏览器也有侧栏。

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

身高确实不是问题。

Answer 10

sbeam 说“你总是希望每行有 65-80 个字符”。 那不是真的。 例如，维基百科每行可能有 180 个字符。 或者它本来就是一个特定的网站？

Answer 11

最近的建议是：

针对 1024x768 进行优化。 对于大多数网站来说，这将覆盖大多数访问者。 大多数日志显示，92-99% 的访问宽度将超过 1024。 虽然 1280 越来越常见，但仍然有很多 1024 以及低于该值的产品。 为此进行优化，但不要忽略其他内容。

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

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

使用响应式设计和流畅布局。 使用在调整窗口大小时会调整的布局。 人们经常这样做，尤其是在大显示器上。 这只是一个很好的 CSS 实践。 有几个前端框架支持这一点。

将移动设备视为一等公民。 您一直在从移动设备获得更多流量。 这些引入了更多的屏幕尺寸。 您仍然可以针对 960 进行优化，但使用响应式网页设计技术意味着您的页面将根据屏幕尺寸进行调整。

记录浏览器显示信息。 您可以获得有关此的实际数字。 我在此处和此处 和 这里。 您还可以操纵您的网站来收集相同的数据。

用户将滚动，因此不必太担心高度。 旧的观点是用户不会滚动，任何重要的内容都应该放在“首屏”。 这在几年前就被推翻了。 用户经常滚动。

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

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

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

• 响应式网页设计（2010 年，5 月 25 日），Ethan Marcotte，A List Apart。
• 维基百科上的 响应式网页设计
• 多设备布局模式（2012 年，3 月 14 日）Luke Wroblewski。 列出了适应性多设备屏幕布局的最流行模式。

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

• Twitter Bootstrap
• Zurb 基金会
• 50 个出色的响应式网页设计工具（2012 年，4 月 24 日）Denise Jacobs & 彼得·加斯顿

Answer 12

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

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

话虽如此，我相信每个桌面都应该能够显示 1024x768。 但是，在 iPhone 或其他屏幕有问题的设备上运行的浏览器，甚至那些不使用整个桌面作为浏览器的浏览器呢？

在回答您的具体问题时，不，我不认为浏览器中的最小或公共显示区域有任何标准。

Answer 13

强迫用户水平滚动是一种严重的 UI 违规行为。 除非您专门为已知屏幕尺寸的人群构建网站，否则最安全的做法是确保您的设计适用于小至 800 像素宽的屏幕（如果没记错的话，大约占网络冲浪人群的 8%）。 让它很好地适应更大的屏幕是明智的，但不要以仍然在 800x600 下冲浪的人们为代价。

还有另一件事需要考虑：并非每个人都以全屏方式运行浏览器（我不这样做）。 因此，由于多种原因，如果可以针对特定（且大）的“屏幕尺寸”进行设计的想法实际上行不通。

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

Answer 14

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

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

Answer 15

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

这些宽度对于其预定义网格（列布局）有优势，如果您要包含任何广告，它们可以很好地与广告的标准尺寸配合使用。

有趣的谈话也值得一看。

请参阅 YUI 基础

Answer 16

这是一个很棒的工具：Google 实验室浏览器大小

Answer 17

我想说的是，您应该只期望用户拥有分辨率为 800x600 的显示器。 加拿大政府制定了标准，将此列为要求之一。 尽管对于拥有精美宽屏显示器的人来说，这可能看起来很低，但请记住，并不是每个人都有漂亮的显示器。 我仍然知道很多人在 1024x768 下运行。 遇到在 800x600 分辨率下运行的人并不罕见，尤其是在旅行时在便宜的网吧里。 另外，如果您不愿意，最好将浏览器窗口设置为全屏。 您可以使网站在更宽的显示器上更宽，但不要让用户水平滚动。 曾经。 支持较低分辨率的另一个优点是您的网站将在手机和任天堂 Wii 上运行更容易。

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

无论您的目标浏览器大小如何，请确保为浏览器工具栏、状态栏和滚动条留出空间，如上所述。 Internet Explorer (IME) 的工具栏和状态栏中通常有超过 100 像素的垂直空间。 通常，如果我拍摄 1024 x 768 的尺寸，为了安全起见，我会尝试创建大约 960 - 980 像素宽和 600 像素高的设计。 这样，您就可以在必要时容纳滚动，并提供一些漂亮的空白（如果设计需要的话）。 对于需要定位特定尺寸的情况，我强烈推荐 YUI 网格：

YUI Grid

Answer 22

我从设计师那里收到很多问题，不仅涉及宽度，还涉及使用什么高度来“将所有内容都放在折叠之上”。 这是我最近给出的一个答案 -

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

（您总是希望每行有 65-80 个字符，行高约为 1.15）。 这是文本的最佳列宽，并且已被证明比非常宽或窄的列读取起来更快、更愉快）

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

这里有一些其他网站也或多或少说了同样的话 - 但是
计划让每个人都获得“首屏”的一切是很困难的
因为那么你可能只有400px左右，根据实际情况
统计数据。

最后是一篇很详细的长篇文章（我会发布更多内容，但我说我太菜鸟了）
- 如何针对浏览器尺寸进行设计 - baekdal.com

Answer 23

我个人总是坚持最大宽度为 1000px，在页面中间居中（通过左/右边距：自动）。

如果您的运行分辨率低于 1024x768，那么就该升级了。 严重地。 快到 2010 年了。您可以购买原生分辨率为 1280x1024 的廉价液晶显示器。