我有一个关于固定布局的问题。它有两个部分，密切相关，所以我提出了一个问题。
（a）部分 为什么建议网站布局使用960px？据我所知，它针对最常见的屏幕分辨率（1024px）进行了优化。但为什么960px呢？ 1000px不会那么好吗？
（b）部分 什么是Grid系统？我确实检查了960.gs，但没有得到列的想法。是否更好地使用网格系统（使用960.gs中的模板，看起来非常混乱）或者我应该坚持使用传统方式，例如：
<div id="wrap">
<div id = "left-column">..</div>
<div id = "center-column">..</div>
<div id = "right-column">..</div>
</div>
答案 0 :(得分：55)
1024px是它瞄准的最大屏幕宽度。我们需要允许一些窗口镀铬，所以它需要更少。理想情况下我们喜欢它有很多因素，允许我们将它分成具有整数宽度的相等大小的列。
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没有那么多
echo factors(1000);
1 2 4 5 8 10 20 25 40 50 100 125 200 250 500 1000
具体来说，您可以轻松地将960拆分为2,3,4,5,6和8列。
答案 1 :(得分：32)
960像素是网页布局的常见宽度，因为1024 x 768是多年来最常见的分辨率，设计师被迫设计最低的公分母。当设计到固定宽度时，设计是明智的，因此大多数人看不到水平滚动条。如果您的设计宽度为1024像素，那么高于视口的页面（简单来说就是768像素）会突然引入一个垂直滚动条，消耗掉可用的水平空间，突然小于1024像素（1024减去宽度垂直滚动条。）
因此，您需要的宽度小于1024减去垂直滚动条的宽度。滚动条的宽度不超过20像素，但要考虑非最大化的窗口并最终得到一个可以轻松分割成尽可能多的因子的数字，因为这样可以更容易地设计固定大小的框或列。由于960的因子超过1000，因此选择了960。
这是一个部分错误的安全网，将设计基于960像素的固定宽度，但是，因为许多人不会最大化他们的窗户甚至不能正确地重新调整它们，所以即使分辨率高于1024，他们的浏览器也是如此窗口可能不适合960像素。这就是为什么responsive web design开始起飞的原因，设计更加流畅，并且能够响应用户的设备设置（如屏幕分辨率）。
网格系统只是一组预定义的CSS类名，您可以在HTML文档中使用它们将设计中的不同框对齐到与网页设计的一个或多个常见布局匹配的“网格”。如果你不熟悉CSS并且发现很难对齐你的设计组成的框（宽度和高度），那么网格系统是很好的。
如果您发现CSS足够简单，可以自己编写，我建议您自己编写。我还建议不要使用严格固定宽度的列，而是更灵敏的网页设计（如上所述），以适应不同的屏幕尺寸比固定宽度设计更好。
答案 2 :(得分：7)
使用了960px，因为它可以被1,2,3,4,5,6,8,10,12,15和16 ...整除 - 允许设计人员拥有各种不同的列宽和可能布局。在这方面可能还有其他“魔术”数字。
同样正如所指出的，960px的宽度适合大多数分辨率“很好”。
答案 3 :(得分：6)
我认为可分性原因是主要原因。 {2 ^ 6,3,5}允许（7 * 2 * 2）= 28个缩放因子 使用六个二和下两个最小的素数
同样960 = 1920/2 它还加倍以保护另一个用例：其中用户平铺2个窗口并排 比如左侧的浏览器和右侧的文字处理器。
答案 4 :(得分：5)
网格系统用于在同一垂直线上排列元素。这为您的布局提供了更好的外观，因为所有文本/标题/图像都以相同的方式保持对齐。
960正如其他人所说的那样基于12 or 16 colums，因为它可以被大多数数字分开。这样你可以有一行让我们说8个元素和4个元素之一，并在你的元素之间有相同的空间。如果您查看链接，您可以看到元素之间的白色边距与制作2-8-2单元格布局或4-4-4单元格布局（基于12列）相同
答案 5 :(得分：2)
960px有很多因素，这意味着布局可以有很多不同尺寸的全像素，合理的值。
使用960px是因为最常见且是经常使用的最小屏幕分辨率。你会得到移动设备和一些800x600的屏幕，但是它们之间的距离很小。页面一侧的额外空间允许窗口边框和滚动条，同时不会遮挡内容。
答案 6 :(得分：1)
这是一种不同的网格思维方式。我在这里提供的是一种工作解决方案，可以创建响应式设计的宽度独立性所需的精确布局。我假设所有优秀的网页设计都应该在所有缩放尺寸上都具有响应性和准确性。
在过去三年中设计/构建了数百个响应式着陆页后，我发现了早期的960像素网格问题。由于响应式设计使用宽度百分比而不是像素，因此数字100变得非常重要。此问题的第二个重要方面是避免使用小数百分比。最后一个关键部分是确保图像宽度与它们占据的百分比成正比。鉴于这三个约束，只有一个网格是有意义的：1000像素网格。
在采用这种方法之前，我们使用960像素网格以及相关的小数百分比来表示我们的响应式设计。结果我们发现从一个浏览器到下一个浏览器的结果不同。方差是微妙的，像素或这样的像素，并且由于舍入误差。有些人发现这种细微差别是可接受的权衡，因为使用小数百分比可以轻松地将列完全相等。如果您对一个深思熟虑的替代方案感兴趣，我邀请您继续阅读。
对于那些熟悉美国货币，特别是美元的人，您已经了解了整数百分比的工作原理。你知道美元可以使用便士，镍币，硬币，四分之一和五十美分来细分。任何时候你必须以三种方式分割一美元，最终会有额外的便士。在您的布局中，使用整数，这意味着三列可以设置为33％：34％：33％。您的图像尺寸为330px，340px＆amp; 330px。宽度的差异实际上是不可察觉的，因为我们的感知更倾向于元素的对齐而不是宽度的比较。 100％网格和1000像素网格关联为简单的1:10比率。该方法简单，准确且易于记忆。
使用百分比构建布局可以节省大量时间。我们的主容器确实使用单个CSS类设置固定的像素宽度。当您更改固定的最大宽度时，布局会缩放。当桌面或手机等移动设备请求您的页面时，您的布局会相应缩放。但是，我会将向上比例限制在不超过125％，以避免图像明显软化。例如，我们即将推出的1230像素的新视口属于此约束条件。
总之，最好记住我们是工匠，他们在最好的情况下创造真正的艺术。历史为我们提供了在计算机存在之前创建的精彩模拟示例。我们都看到了用破碎的玻璃或瓷砖制成的美丽马赛克;他们的美丽不是来自机器切割，相同尺寸的作品，而是来自艺术家手中精心制作的精美作品。成熟的历史方法为解决网页设计中出现的类似问题提供了洞察力。