基本网页设计中的尺寸选择

　　在设计和实现PC端网页时，我们通常选择1200px宽度作为安全区设计的标准。这取决于市场上当前设备的主流分辨率和网格概念。

　　根据百度流量研究所的最新数据，2019年10月中国网民访问PC网页时，主流设备分辨率仍为1920*1080，占总分辨率的42.94%。显然，大多数屏幕分辨率都超过了1366*768，所以您不需要做任何特殊的事情来适应1366以下的页面。可以看出，1920px是目前PC网页设计的标准。

　　需要注意的是，此图中的分辨率数值仅作为上限的参考，在设计网页时，不能够将页面的实际显示内容的区域(也成为安全区)等同于此上限看度。考虑到在Windows等部分浏览器上，滚动条本身也需要占据一定的宽度，因此，过分的贴边或是接近于整屏幕宽度的设计是不被推荐的。

　　以1920px宽度作为设计标准，在整个页面中，网页的安全区域则为1200px。换句话说，我们只要保证网页的实际内容展示区域控制在1200px这个范围内，就能保证整个页面在不同尺寸的浏览器访问时能够完整的显示出所有的内容。

　　为了布局方便，我们通常会将内容区域用栅格进行划分，这里我们一般会将内容区域划分为12格或者24格。同时在栅格间增加通用固定的间距，可以很好的处理大部分情况下的垂直排列问题。

　　使用12格或24格的好处：能够倍2、3、4整除;方便处理内容区域中2:1;1:2:1这一类常见的间距分布。

　　栅格的计算方式：

　　我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间距设置为“i”，此时我们把“a+i”定义为“A”，他们之间的关系如下：

　　W=(a*n)+(n-1)*i

　　由于a+i=A

　　可得(A*n)-i=W

　　我们定义了W为1180px，A为50px，i为20px，所以n=24

　　当我们设置设计网格时，我们可以将总宽度设置为1180(1200px安全区减去两个网格的空白)，并将页面分成24列，宽度为300px，间距为20px

　　使用网格系统可以有效地提高网页的标准化程度。在网格系统下，页面中元素的大小具有相同的基线和规则。而基于网格系统的设计可以使整个网站的布局与每个页面保持一致，增强页面的统一性，提高用户体验。