屏幕尺寸

更高的屏幕分辨率最终会让一切看起来更小。

极少数互联网用户仍在使用旧的分辨率，例如曾经流行的 800×600。

使用 720 像素宽度的网站在高分辨率屏幕上显得非常小，并且不会为侧边栏留出空间。现在大多数网站都停留在大约 960 像素宽的地方。一些网站甚至在更广泛的网站上迎合最新技术。

| Website                 | Max-Width |
|-------------------------+-----------|
| Stack Exchange Websites | 980px     |
| facebook.com            | 980px     |
| yahoo.com               | 990px     |
| msn.com                 | 970px     |
| wikipedia.com           | 100%      |
| walmart.com             | 720px     |
| bestbuy.com             | 790px     |
| apple.com               | 985px     |

尽管考虑最新设备很重要，但我相信最佳网站宽度仍然是 960 像素宽。此宽度适合大多数设备，并使您的网站在 1024 像素和 1366 像素宽屏幕中都非常适合。

960能被2、3、4、5、6、8、10、12、15整除，做一个完美的网格站点是一个梦想。这导致了称为“960 网格系统”的流行资源。

可读性

博客、新闻站点或任何其他类型的内容驱动站点会考虑可读性。

“文本布局的理想行长基于人眼的生理学。在正常阅读距离下，视野的弧线只有几英寸——大约是精心设计的一列文本的宽度，或者每行大约 12 个单词。”

阅读率和保留率都随着列宽的增加而下降。阅读一页宽的页面比阅读一个中等的文本栏要困难得多。对于网页设计师，请考虑字体大小和分辨率。在大多数情况下，阅读栏的安全宽度在 400 到 700 像素之间，选择合适的字体大小将极大地帮助您的读者。

真正的问题不是“哪个文件大小？” 但是“哪个文档宽度？”。

我建议设计为 1440 像素 X 900 像素，这样您就处于浏览器大小的平均水平（为较小的浏览器和 ipad 放置一些 1000 像素的指南）。

不要将您的设计停在 1000 像素，将您的内容停在 1000 像素。

通常我从这个尺寸开始，然后根据我的内容增加我的高度。请记住，您不能为所有用户设置相同的高度，因为他们都有不同的浏览器尺寸/不同的屏幕分辨率。

您应该在设计中使用网格，这不是必需的，但它会在几件事上为您提供帮助：

• 每个部分之间具有相同的列宽，相同的间隙
• 如果您打算使用网格系统，将其转换为 css 会更容易

（您可以安装 Photoshop 插件来生成网格或下载一些带有所有指南的 .psd）

您可以在此处查看2014 年浏览器尺寸的摘要（请务必查看其他高）。

通常用户现在使用设置为 1024 x 768 或更大的浏览器进行冲浪。使用 1000 像素作为最大宽度通常是可以接受的

我主要使用 1100px 宽的模型，即使我正在设计 1024px 分辨率。我在模型中设置了 1000px 的指南。因为整个内容都在我的位置，高度可能会有所不同。

一旦你检查了http://960.gs/