Html 为什么宽度是 960px？

Why width 960px?

提问by jay

I have a question regarding fixed layout. It has two parts, closely related, so I'm putting in one question.

我有一个关于固定布局的问题。它有两个部分，密切相关，所以我提出一个问题。

Part (a)Why 960px is suggested for the website layout? I understand that it is optimized for the most common screen resolution (1024px). But why exactly 960px? Won't the 1000px be as good?

Part (a)为什么建议网站布局使用 960px？我知道它针对最常见的屏幕分辨率（1024px）进行了优化。但为什么正好是 960px？1000px 不是很好吗？

Part (b)What exactly is Grid system? I did check 960.gs but didnt get the idea of columns. Is it better to use grid system (using the template from 960.gs, which looks so messy) or should i stick with traditional way, like:

(b)网格系统究竟是什么？我确实检查了 960.gs 但没有得到列的想法。是使用网格系统更好（使用 960.gs 中的模板，看起来很乱）还是我应该坚持使用传统方式，例如：

<div id="wrap">
     <div id = "left-column">..</div>
     <div id = "center-column">..</div> 
     <div id = "right-column">..</div>     
</div>

回答by Rich Bradshaw

1024px is the max screen width it's aiming at. We need to allow some window chrome, so it needs to be less. We'd ideally like it to have lots of factors, allowing us to split it into equal size columns with integer widths.

1024px 是它瞄准的最大屏幕宽度。我们需要允许一些窗口镶边，所以它需要更少。理想情况下，我们希望它有很多因素，允许我们将其拆分为具有整数宽度的相等大小的列。

960 has lots of factors:

960有很多因素：

echo factors(960);
1  2  3  4  5  6  8  10  12  15  16  20  24  30  32  40  48  60  64  80  96  120  160  192  240  320  480  960 

1000 doesn't have as many

1000 没有那么多

echo factors(1000);
1  2  4  5  8  10  20  25  40  50  100  125  200  250  500  1000  

Specifically, you can easily split 960 into 2,3,4,5,6 and 8 columns.

具体来说，您可以轻松地将 960 拆分为 2、3、4、5、6 和 8 列。

回答by Asbj?rn Ulsberg

Why 960px is suggested for the website layout?

为什么网站布局建议使用 960px？

960 pixels is a common width for web layouts because 1024 x 768 was the most common resolution for many years and designers were forced to design for the lowest common denominator. When designing to a fixed width, it's wise to design so most people don't see a horizontal scrollbar. If your design is 1024 pixels wide, a page that is higher than the viewport (say 768 pixels for simplicity), will suddenly introduce a vertical scrollbar, eating away the available horizontal space which suddenly is less than 1024 pixels (1024 minus the width of the vertical scrollbar).

960 像素是 Web 布局的常见宽度，因为 1024 x 768 是多年来最常见的分辨率，设计人员被迫为最小公分母进行设计。当设计为固定宽度时，明智的做法是设计成大多数人看不到水平滚动条。如果你的设计是 1024 像素宽，一个高于视口的页面（简单地说是 768 像素），会突然引入一个垂直滚动条，吃掉可用的水平空间，它突然小于 1024 像素（1024 减去宽度垂直滚动条）。

So you need a width less than 1024 minus the width of the vertical scrollbar. The width of a scrollbar isn't much more than 20 pixels, but to take into account non-maximized windows and end up with a number that's easily divisible into as many factors as possible, since that makes designing fixed-size boxes or columns easier. As 960 has more factors than 1000, 960 was chosen.

所以你需要的宽度小于 1024 减去垂直滚动条的宽度。滚动条的宽度不会超过 20 像素，但要考虑到非最大化窗口并最终得到一个可以轻松整除为尽可能多的因子的数字，因为这使得设计固定大小的框或列更容易. 由于 960 的因子比 1000 多，因此选择了 960。

It's a partially false safety net to base the design on a fixed width of 960 pixels, though, since many people won't maximize their windows or even re-size them properly, so even with resolutions higher than 1024, their browser window might not fit 960 pixels. That's why responsive web designis beginning to take off, where designs are more fluid and responsive to the user's device settings (like screen resolution).

然而，将设计基于 960 像素的固定宽度是一个部分错误的安全网，因为许多人不会最大化他们的窗口，甚至不会正确地重新调整它们的大小，所以即使分辨率高于 1024，他们的浏览器窗口可能不会适合 960 像素。这就是响应式网页设计开始流行的原因，其设计更加流畅且响应用户的设备设置（如屏幕分辨率）。

What exactly is Grid system?

网格系统究竟是什么？

A grid system is just a set of predefined CSS class names that you can use in your HTML documents to align the different boxes in your design into a "grid" that matches one or more common layouts for web design. A grid system is good if you're unfamiliar with CSS and find it difficult to align the boxes (in both width and height) your design is composed of.

网格系统只是一组预定义的 CSS 类名称，您可以在 HTML 文档中使用这些名称将设计中的不同框对齐到一个“网格”中，该“网格”与网页设计的一个或多个常见布局相匹配。如果您不熟悉 CSS 并且发现很难对齐您的设计所组成的框（宽度和高度），则网格系统很好。

If you find CSS simple enough to write yourself, I recommend you write it yourself. I also recommend not to use strictly fixed width columns, but instead more responsive web design (like mentioned above) to accommodate different screen sizes better than a fixed-width design is capable of.

如果您发现 CSS 足够简单，可以自己编写，我建议您自己编写。我还建议不要使用严格固定宽度的列，而是使用更具响应性的网页设计（如上所述）以比固定宽度设计更好地适应不同的屏幕尺寸。

回答by Ross

960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16... - allowing designers to have a huge variety of different column widths and possible layouts. There are probably other "magic" numbers in this respect.

使用 960px 是因为它可以被 1、2、3、4、5、6、8、10、12、15 和 16...整除 - 允许设计人员拥有大量不同的列宽和可能的布局。在这方面可能还有其他“神奇”数字。

Also as pointed out, a width of 960px fits the majority of resolutions "nicely".

同样正如所指出的，960px 的宽度“很好地”适合大多数分辨率。

回答by GKuser

I think the divisibility reason is the primary reason. { 2^6 , 3 , 5 } allows for (7*2*2)=28 scaling factors using six twos and the next two smallest primes

我认为可分性的原因是主要原因。{ 2^6 , 3 , 5 } 允许 (7*2*2)=28 缩放因子使用六个二进制数和接下来的两个最小素数

Also 960 = 1920/2 It also double to guard another use case : wherein user tile 2 windows side-by-side like browser on left side, and word processor on right.

同样 960 = 1920/2 它还加倍保护另一个用例：其中用户并排平铺 2 个窗口，如左侧的浏览器和右侧的文字处理器。

回答by Benjamin Udink ten Cate

A grid system is used to have elements line out on the same vertical lines. This gives your layout a better look because all text/headers/images are left aligned the same way.

网格系统用于将元素排列在相同的垂直线上。这使您的布局看起来更好，因为所有文本/标题/图像都以相同的方式左对齐。

960 is as others said a based on 12 or 16 columsbecause it can be devided by the most amouont of numbers. This way you can have a row of lets say 8 elements and one of 4 and have the same space between your elements. If you look at the link you can see the white margins between the elements are the same wheter you make a 2-8-2 cell layout or a 4-4-4 cell layout(12 col based)

960 就像其他人所说的基于12 或 16 列，因为它可以被最多的数字划分。这样你就可以有一排让我们说 8 个元素和 4 个元素之一，并且你的元素之间有相同的空间。如果您查看链接，您可以看到元素之间的白色边距是相同的，无论您是制作 2-8-2 单元格布局还是 4-4-4 单元格布局（基于 12 列）

回答by Bojangles

960px has a huge amount of factors, meaning layouts can have full-pixel, sane values with a lot of different dimensions.

960px 有很多因素，这意味着布局可以有很多不同尺寸的全像素、合理的值。

960px is used because the most common and is the smallest screen resolution used regularly. You'll get mobile devices and a few 800x600 screens, but there are few and far between. The extra space on the side(s) of the page allows for window borders and scroll bars, while not obscuring the content.

使用 960px 是因为最常见，也是经常使用的最小屏幕分辨率。您将获得移动设备和一些 800x600 屏幕，但数量很少。页面侧面的额外空间允许窗口边框和滚动条，同时不会遮挡内容。

回答by Tom Young

Here is a different way of thinking about grids. What I offer here is a working solution to create accurate layouts needed for the width independence of responsive design. I make the assumption that all good web design should be responsive and accurate at all scaled sizes.

这是对网格的另一种思考方式。我在这里提供的是一个有效的解决方案，用于创建响应式设计的宽度独立所需的准确布局。我假设所有好的网页设计都应该在所有缩放尺寸下都具有响应性和准确性。

Having designed/built hundreds of responsive landing pages over the past three years I discovered an issue with the 960 pixel grid early on. Since responsive designs use percentages for widths instead of pixels, the number 100 becomes all important. The second important aspect of this issue is to avoid the use of fractional percentages. The final essential part is to make sure the image widths are in exact proportion to the percentage they occupy. Given these three constraints there is only one grid that makes sense: the 1000 pixel grid.

在过去三年中设计/构建了数百个响应式登录页面后，我很早就发现了 960 像素网格的问题。由于响应式设计使用百分比来表示宽度而不是像素，因此数字 100 变得非常重要。这个问题的第二个重要方面是避免使用小数百分比。最后一个重要部分是确保图像宽度与其所占的百分比成正比。鉴于这三个限制条件，只有一个网格有意义：1000 像素网格。

Before adopting this approach, we used the 960 pixel grid with the associated fractional percentages for our responsive designs. As a result we found different results from one browser to the next. The variance is subtle, a pixel this way or that, and due to round-off errors. There are some who find such nuances to be an acceptable trade off for the ease of dividing columns exactly equal using fractional percentages. If you are interested in a thoughtful alternative I invite you to read on.

在采用这种方法之前，我们在响应式设计中使用了 960 像素网格和相关的小数百分比。结果，我们发现从一个浏览器到另一个浏览器的结果不同。方差是微妙的，像素这样或那样，并且由于舍入误差。有些人发现这样的细微差别是可以接受的折衷方案，因为使用小数百分比可以轻松地将列完全相等。如果您对一个深思熟虑的替代方案感兴趣，我邀请您继续阅读。

For those familiar with U.S. currency, specifically the dollar, you already understand how whole number percentages work. You know the dollar can be sub-divided using pennies, nickels, dimes, quarters and fifty cent pieces. Anytime you have to split a dollar three ways someone will end up with the extra penny. In your layout, using whole numbers, this means three columns could be set up as 33%:34%:33%. Your image sizes would be 330px, 340px & 330px. The differences in width are virtually imperceptible because our perception is far more attuned to the alignment of elements rather than the comparing of widths. The 100 percent grid and the 1000 pixel grid correlate as a simple 1:10 ratio. This method is simple, accurate and easy to remember.

对于熟悉美国货币，特别是美元的人，您已经了解整数百分比的工作原理。你知道美元可以用便士、镍币、角钱、四分之一和五十美分来细分。任何时候你必须将一美元分成三种方式，有人最终会得到额外的一分钱。在您的布局中，使用整数，这意味着可以将三列设置为 33%:34%:33%。您的图像尺寸为 330 像素、340 像素和 330 像素。宽度的差异实际上是无法察觉的，因为我们的感知更倾向于元素的对齐而不是宽度的比较。100% 网格和 1000 像素网格关联为简单的 1:10 比率。这种方法简单、准确、易记。

Building your layouts using percentages is a tremendous time saver. Our main container does get a fixed pixel width set using a single CSS class. When you change the fixed max width the layout scales. When a mobile device such as a table or phone requests your page, your layout will scale accordingly. I would, however, limit the upward scale to be no more than 125% to avoid noticeable softening of the images. For example, our new upcoming view port of 1230 pixels falls within this constraint.

使用百分比构建布局可以节省大量时间。我们的主容器确实使用单个 CSS 类设置了固定的像素宽度。当您更改固定的最大宽度时，布局会缩放。当桌子或手机等移动设备请求您的页面时，您的布局将相应地缩放。但是，我会将向上比例限制为不超过 125%，以避免图像明显柔化。例如，我们即将推出的 1230 像素新视口就在此限制范围内。

In conclusion, it is best to remember we are craftsmen who, at our best, create true art. History provides us with wonderful analog examples created before computers existed. We have all seen the beautiful mosaics created with broken pieces of glass or tile; their beauty comes not from machine-cut, equal size pieces but rather, the carefully crafted pieces assembled by the hands of an artist. Established historic methods provide insight to solving similar problems found in web design.

总而言之，最好记住我们是工匠，尽我们所能创造真正的艺术。历史为我们提供了在计算机出现之前创建的精彩模拟示例。我们都见过用碎玻璃或瓷砖制成的美丽马赛克；它们的美丽并非来自机器切割的同等大小的作品，而是由艺术家手工组装而成的精心制作的作品。既定的历史方法为解决网页设计中发现的类似问题提供了见解。