我应该使用哪种浏览器宽度来设计网站？

我正在网站的图形部分上工作，并被要求在Photoshop中设计一个网站。我想知道网站的平均尺寸和浏览器宽度是多少，这样我就可以使用这些尺寸创建模型。

在现代网页设计时代，浏览器的宽度无关紧要。有这么多不同的设备，您需要使您的设计具有响应能力，因为它们适用于任何尺寸的屏幕。

为此，您应该使用某种流体宽度网格系统，并使用@media查询定位特定的设备。

媒体查询只是针对不同视口大小的不同CSS规则集。媒体查询还响应动态更改浏览器的宽度。当您使浏览器变小时，页面会通过将浮点数减少或从12列变为1或2来进行响应。当移动设备和桌子上的用户从纵向更改为横向或横向时，响应度也会对用户产生反应。

目标尺寸：

• 纵向模式下的320 x 480移动设备
• 480 x 640小型平板电脑或横向模式下的iPhone
• 纵向模式下的768 x 1024平板电脑
• 横向模式下的1024 x 768平板电脑
• 1200多种桌面浏览器
• 2900 ++大型媒体显示器或会议（这不是必须的，但是如果有人在非常大的显示器上浏览您的站点该怎么办。

要了解这一点，请看一下无框网格。它实际上并不流畅，但是在您调整浏览器时，它会从14列一直下降到1列

Twitter Bootstrap是使用流行的用户界面组件构建的简单CSS，HTML和JS框架，也是现代响应式设计实践的一个很好的例子。

您可能还需要考虑的另一件事是像素密度。iPhone 4和新iPad的视网膜显示屏的清晰度是普通屏幕的2倍。这使得提供图片和图像而不是文本的做法几乎已过时。在iPad上带有文字的图像看起来很可怕。

因此，该问题的答案是您没有应设计的标准浏览器宽度。您应该根据用户做出设计决策，并使其在大多数人最容易访问的地方进行。

许多布局模板使用960px宽度，因为它适合普通的1024px宽屏分辨率，为滚动条提供了一些空间，并且可以容易地分为2、3、4、5、6、8、10、12和16-非常适合分栏布局。

有关示例，请参见http://960.gs。

其他框架（例如引导程序）使用940px来解决列之间的一些空白。

如果您要定位桌面浏览器，则可以根据需要轻松地将宽度设置为约1000像素。

StatCounter屏幕分辨率

当最典型的显示为1024像素或更大时，为什么大约有1000像素？因为您必须允许滚动条和窗口镶边。

如果您专门针对移动浏览器，那么320像素宽可能是一个不错的选择，尽管移动浏览器通常会缩放内容以适合视图宽度，因此950或960像素宽可能会更好。请注意，在iPhone等高DPI设备上，320 CSS / HTML像素等于640设备像素。

StatCounter手机屏幕分辨率

您的目标市场也可能会改变。如果您是针对精通技术的受众群体，则可以期望将其倾斜到更现代的设备上。如果要建立政府站点，则需要满足更大范围的需求。

另外，您如何建设该网站？如果您使用的是网格系统，例如Blueprint CSS或960 Grid System，那么这也可以决定大小（大多数网格系统也可以更改为其他大小）。

如果您想在移动设备和台式机上都能正常工作，则可能还需要研究自适应设计。

在这个时候，全球诽谤的桌面尺寸为1024x768，最好将网站设置为1003px ...