网站的标准宽度(以像素为单位)或统计信息在哪里?

评论

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

#1 楼

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

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

问题是:PC屏幕在某些地区总是越来越大,并且缓慢增长。

另一方面,在高科技领域,您的屏幕越来越小移动设备和上网本中的屏幕。

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

为您提供一些参考链接


http:/ /www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http:// www .alistapart.com / articles / sensitive-web-design /
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
http://dev.w3.org/csswg/css3-mediaqueries/


#2 楼


网站的标准宽度以像素为单位?


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

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

用户很可能会看到不同的屏幕尺寸而无需考虑太多,因此您希望将其最小化当他们拖动窗口停靠在屏幕的一半或碰巧倾斜手机时,会感到惊讶。

一些常用的宽度范围是:



特小号:0-480

小号:480- 768

中号:768-1024

大号:1024-1200

特大号:1200+

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

说了这么多,请注意,您使用的数字只要该站点在用户选择在其上查看的任何设备上都可以正常运行就没有特别重要。


统计信息在哪里?


现在最棘手的部分是实际数据。如果您要重新设计站点,那么唯一重要的数据就是您自己的数据。 Wikipedia或Stack Overflow或Google或其他任何可能会列出分析数据的大型网站所说的与您的网站数据无关。

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

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


后代的旧版本过时的RWD版本

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

关于标准:

80%的观众最多可以处理1000像素的宽度,但是可以处理1000像素以上的观众却不能。有了宽屏显示器,许多人会将他们的窗户对准屏幕的一半。现在Win7支持拖放功能,它很有可能会变得更加流行。

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

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

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

评论


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

–马蒂斯
2012-09-27 14:02

链接不再起作用。

– AlphaMale
15年7月16日在8:07

#3 楼

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

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

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

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

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

#4 楼

标准将是“尽可能的宽/高”。这取决于用户屏幕:

http://www.w3schools.com/browsers/browsers_display.asp

#5 楼

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


1366x768 25.4%
1920x1080 11.0%
1680x1050 5.7%
1600x900 5.0%
1920x1200 2.9%
1360x768 2.1%
2560x1440 1.1%
其他11.6%


#6 楼

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的流体设计。

#7 楼

确实没有标准的东西,统计数据完全取决于目标人口统计。针对技术人员通常会带来更好的硬件和更高的分辨率,反之则技术越少。但是,在大多数情况下,电话,上网本等设备的分辨率却大大低于标准分辨率。

作为参考,我现在通常假设最低分辨率为1024x768。

这里是一些:
http://www.w3schools.com/browsers/browsers_display.asp
http://www.w3counter.com/globalstats.php

#8 楼

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

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

所以,我不需要相信(不喜欢)有关网页布局大小的标准。

#9 楼

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

#10 楼

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

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

评论


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

–西蒙·海特(Simon Hayter)♦
13年2月22日在20:37



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

–詹·金
2013年2月23日在21:13



#11 楼

960像素是网站的最佳宽度

评论


你有资源吗?

–user6901
2012-2-28的3:06