为什么宽度为960px？

Question

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

(a) 为什么建议网站布局使用960px？据我所知,它针对最常见的屏幕分辨率(1024px)进行了优化.但为什么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>

Answer 1

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

Answer 2

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

960像素是网页布局的常见宽度,因为1024 x 768是多年来最常见的分辨率,设计师被迫设计最低的公分母.当设计到固定宽度时,设计是明智的,因此大多数人看不到水平滚动条.如果您的设计宽度为1024像素,那么高于视口的页面(简单来说就是768像素)会突然引入一个垂直滚动条,消耗掉可用的水平空间,突然小于1024像素(1024减去宽度垂直滚动条).

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

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

什么是Grid系统？

网格系统只是一组预定义的CSS类名,您可以在HTML文档中使用它们将设计中的不同框对齐到与网页设计的一个或多个常见布局匹配的"网格".如果您不熟悉CSS并且发现难以对齐您的设计组成的框(宽度和高度),那么网格系统就很好.

如果您发现CSS足够简单,可以自己编写,我建议您自己编写.我还建议不要使用严格固定宽度的列,而是更灵敏的网页设计(如上所述),以适应不同的屏幕尺寸,比固定宽度的设计更好.

Answer 3

使用960px是因为它可以被1,2,3,4,5,6,8,10,12,15和16整除... - 允许设计人员拥有各种不同的列宽和可能的布局.在这方面可能还有其他"魔术"数字.

同样指出,960px的宽度适合大多数分辨率"很好".

Answer 4

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

另外960 = 1920/2它还加倍来保护另一个用例:其中用户平铺2个窗口并排像左侧的浏览器,右侧的文字处理器.

Answer 5

网格系统用于在相同的垂直线上排列元素.这为您的布局提供了更好的外观,因为所有文本/标题/图像都以相同的方式对齐.

960就像其他人所说的一样,基于12或16个列,因为它可以被最多的数字分开.这样你可以有一行让我们说8个元素和4个元素之一,并在你的元素之间有相同的空间.如果查看链接,您可以看到元素之间的白色边距与制作2-8-2单元格布局或4-4-4单元格布局(基于12列)相同

Answer 6

960px 有大量的因素，这意味着布局可以具有全像素、健全的值和许多不同的尺寸。

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