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