网站的标准宽度(以像素为单位)是多少?


23

网站的标准宽度是多少?以像素为单位?统计信息在哪里?


2
快速发展到今天,自适应网页设计已成为标准。您的网站应适应许多不同的屏幕尺寸。至少:高清屏幕,台式机,笔记本电脑,平板电脑和移动设备。
马里奥·阿瓦德

Answers:


23

尽管大多数开发人员都将1024x768作为标准,但没有标准。

有一个名为960grid的CSS网格系统,该系统假定主体宽度为960px,然后将96列的列拆分为10px,将80列的拆分为12px。

问题是:PC屏幕总是越来越大,在某些地区却越来越慢。

另一方面,在技术顶尖的移动设备和上网本中,屏幕较小。

处理这种现实可能会很痛苦。有CSS Media Queries可以解救。或者,您可以使用标签链接(与rel手持设备一起使用)为移动设备提供替代版本。

跟随一些参考链接


17

网站的标准宽度(以像素为单位)是多少?

任何大于0且小于无穷大的数字。

响应式Web设计(RWD)的当前最佳实践是支持每个设备,而不管其宽度(以像素为单位)。通常,这涉及使用媒体查询为不同范围的屏幕尺寸提供不同的样式。实际使用的范围比设计在尺寸上保持一致的重要性小,并且站点在尺寸上保持功能。

用户很可能会在不考虑太多内容的情况下看到不同的屏幕尺寸,因此,当用户拖动窗口以将其停靠在屏幕的一半或碰巧倾斜手机时,希望将其惊讶程度降到最低。

一些常用的宽度范围是:

  • 特小:0-480
  • :480-768
  • :768-1024
  • :1024-1200
  • 特大号:1200+

这些范围是如此普遍,以至于我说它们实际上是一个标准。并非所有范围都需要使用,例如,对于低于768的任何东西,某个站点可能是流体宽度,然后对于768+,则是固定宽度并居中。

综上所述,请注意,只要站点在用户选择查看的任何设备上都可以正常运行,您所使用的号码并不重要。

统计在哪里?

现在到了棘手的部分,即实际数据。如果您要重新设计站点,那么唯一重要的数据就是您自己的数据。什么维基百科或堆栈溢出,或谷歌,或任何-其他-大网站,但─强权列表分析数据说的是不相干数据您的网站。

如果您的统计数据显示大多数用户主要使用特定范围的设备宽度,则您可能应该首先关注为这些用户提供服务。综上所述,如果您的设计能够正确响应,则根本不需要关注任何特定的尺寸。

对于新网站或以前没有分析功能的网站,请认真考虑使用移动优先方法,并确保使用分析功能,以便您可以适当地适应用户群。


后代的旧旧RWD版本

令我惊讶的是,没有人想到Google提及浏览器的大小

至于标准:

观众的80%,最多可处理1000像素宽度,而是那些能够处理超过1000像素宽度往往没有。使用宽屏显示器,许多人会将其窗户对准屏幕的一半。既然Win7支持拖放功能,它可能会变得更加流行。

至于高度:您对用户的第一印象是在页面顶部,最高约600像素。但是,大多数用户知道并希望内容落在“首屏之下”,并且愿意并且能够滚动。

如果您想宽于1000像素,我强烈建议您使用流畅的布局,以便上网本和较小屏幕上的用户仍可以正确看到内容。

〜960px通常是标准宽度,但实际上取决于内容和样式。


1
如果有人感兴趣,请将Google Chrome浏览器停靠在我的1920x1200分辨率监视器上的一侧,会产生927px的可用区域(为滚动条留出空间)。
马蒂斯(Mattis)2012年

链接不再起作用。
AlphaMale


2

正如其他人所说,这种事情没有标准。虽然,这里有一些技巧可以使您的网站成功或失败:

我一直使用百分比或最坏情况的构建:通常会遇到的最小屏幕分辨率为800x600,即使这种情况也很少见。以下任何内容都可能在移动设备上。775px宽度是一种很好的使用方式,如果您知道某个事实,则将其扩展到更大的屏幕时,宽度仅为80%即可。最常见的问题是文本内容(按比例缩放为1600px宽度时)似乎空而短。将您的网站宽度设置为775px可以解决此问题,但是在两侧都有大量开放空间的情况下,它看起来可能并不好。

永远不要让您的用户向左或向右滚动。切断双方的内容是失去潜在客户或读者的最快方法。

将导航设置在顶部附近或用户无需滚动查找的位置。

只是一个内容提示;具有较高的图形/较低的信息或较高的信息/较低的图形。试图将两者结合起来总是很糟糕。



1

知道屏幕分辨率的受欢迎程度是有帮助的,然后根据大多数人的普遍使用情况来选择模板。就我个人而言,我建议使用自适应设计-这样,您的网站就可以在所有设备和所有分辨率下使用。

从2013年1月开始。

  1. 1366x768 25.4%

  2. 1920x1080 11.0%

  3. 1280x1024 9.7%

  4. 1440x900 7.3%

  5. 1280x800 8.2%

  6. 1680x1050 5.7%

  7. 1600x900 5.0%

  8. 1920x1200 2.9%

  9. 1360x768 2.1%

  10. 2560x1440 1.1%

  11. 其他11.6%


1

Google Analytics(分析)会记录访问者的屏幕分辨率。您可以轻松地创建自定义报告,以检查有哪些常见的屏幕尺寸您的访问者。这是我网站2013年5月的统计信息(前15名):

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

每个站点的统计信息各不相同,具体取决于它收到的流量类型,因此请相应地进行设计。我本人更喜欢具有百分比宽度,1000px min-width和合理值的流畅设计max-width



0

我认为,这取决于网站的内容。

例如,如果您不需要任何侧边栏等,并且您希望使用最少的设计,则可以将网页宽度设置为500px。

因此,我不相信(也不喜欢)有关Web布局大小的标准。


0

960像素是最安全的,因为它可以在1024x768屏幕上工作,并为滚动条留出空间,并且还可以在横向模式下的iPhone上工作(因为像素将其480x320屏幕增加了一倍,达到了有效的960x640,并且没有滚动条)。


0

考虑到当今大多数宽屏显示器的分辨率为“ 1440x900”或更宽,我认为1280像素宽正越来越成为“标准”,尤其是在显示图像时。

注意:1280像素宽是许多旧的4:3比例的17英寸和19英寸屏幕的宽度。


由于Mac和笔记本电脑,大多数未售出的“二手”屏幕均为1366x768px。看我的答案。
西蒙·海特

由于我还无法在您的答案中“添加评论”,因此我将在此处提出要求。您的屏幕分辨率列表的来源是什么?我好奇。感谢您提供1366x768信息。这很有用。
J. Chin,

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.