Html 为什么是960px？

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

第（a）部分 为什么网站布局建议使用960px？我知道它针对最常见的屏幕分辨率（1024px）进行了优化。但为什么是960px呢？1000像素不是也一样好吗

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

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

..
.. 
..     

960px有大量的因素，这意味着布局可以具有全像素、具有许多不同维度的正常值

---

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

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

---

同样如前所述，960px的宽度“非常适合”大多数分辨率。

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列。

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

正如其他人所说，960是以a为基础的，因为它可以用最多的数字来区分。通过这种方式，您可以拥有一行8个元素和4个元素中的一个，并且元素之间的空间相同。如果您查看链接，您可以看到元素之间的白色边距是相同的，无论您是使用2-8-2单元格布局还是4-4-4单元格布局（基于12列）

为什么建议使用960px作为网站布局？ 960像素是web布局的常见宽度，因为1024 x 768是多年来最常见的分辨率，设计师被迫以最小公分母进行设计。当设计为固定宽度时，明智的做法是设计成大多数人看不到水平滚动条。如果您的设计是1024像素宽，那么一个高于视口的页面（简单来说是768像素）将突然引入垂直滚动条，消耗掉突然小于1024像素（1024减去垂直滚动条的宽度）的可用水平空间

因此，您需要一个小于1024减去垂直滚动条宽度的宽度。滚动条的宽度不超过20个像素，但考虑到非最大化窗口，最终得到的数字很容易划分为尽可能多的因素，因为这使得设计固定大小的框或列更容易。由于960的系数大于1000，因此选择了960

但是，将设计基于960像素的固定宽度是一个部分错误的安全网，因为许多人无法最大化他们的窗口，甚至无法正确调整窗口大小，因此即使分辨率高于1024，他们的浏览器窗口也可能无法容纳960像素。这就是为什么它开始流行的原因，因为它的设计更加流畅，并且对用户的设备设置（比如屏幕分辨率）做出响应

什么是网格系统？ 网格系统只是一组预定义的CSS类名，您可以在HTML文档中使用它们将设计中的不同框对齐到一个“网格”中，该“网格”匹配一个或多个web设计常用布局。如果您不熟悉CSS，并且发现很难对齐设计所包含的框（宽度和高度），那么网格系统是很好的

---

如果您觉得CSS足够简单，可以自己编写，我建议您自己编写。我还建议不要使用严格固定宽度的列，而是使用比固定宽度设计更好的响应性更强的web设计（如上所述），以适应不同的屏幕大小

我认为可分性原因是主要原因。 {2^6,3,5}允许（7*2*2）=28个比例因子 使用六个2和下两个最小的素数

也就是960=1920/2 它还双重保护另一个用例：其中用户将2个窗口并排平铺

---

就像左边的浏览器和右边的文字处理器一样。

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

在过去三年中，我设计/构建了数百个响应性强的登录页，很早就发现了960像素网格的问题。由于响应性设计使用宽度百分比而不是像素，因此数字100变得非常重要。这个问题的第二个重要方面是避免使用分数百分比。最后一个关键部分是确保图像宽度与它们所占的百分比成精确比例。考虑到这三个限制，只有一个网格是有意义的：1000像素的网格

在采用这种方法之前，我们使用960像素网格和相关的分数百分比进行响应性设计。因此，我们在不同的浏览器中发现了不同的结果。变化是微妙的，一个像素这样或那样，由于舍入误差。有些人认为，为了便于使用fr将列完全等分，这种细微差别是可以接受的