网页设计中基础布局

时间：2023-10-01 06:30:01 | 来源：网站运营

时间：2023-10-01 06:30:01 来源：网站运营

网页设计中基础布局：

网格系统

一般而言，网页会有一块主体区域，网站内容都包含在这块区域中。

为了展示更多内容，但又支持尽可能多的显示器尺寸，就会要求主体区域尽可能的小但又足够大。
根据这一特定要求，早年孕育而生了「960网格系统」。网格系统，就是将主体区域划分成若干等份的列，列与列之间保持等份的间隙。它既能在设计中为设计师提供布局参考，又能为前端工程师提供标准化的创建区块提供依据。
960网格系统是由 Twitte推出的一套网格规范，由12、16、24列不同的等份法。12列等份是我们常用的一种方式。 随着屏幕的逐渐增大及网页样式的丰富，960网格开始在某些地方不太适合，或者说看起来有些low了。于是出现了更宽的主题区域，比如1000px、1100px甚至1200px等等。

但这些宽度的使用伴随着一个风险，就是前面提到的 尽可能多的兼容显示器的宽度。

关于这个问题，首先你得了解现在主流分辨率是多少。

早期的大屁股显示器的分辨率是1024*768，所以960是一个比较合适的数字。

现在的笔记本多为1366*768，而21寸以上的台式机是1920*1080。

所以，以现在的眼光来看。你的页面设计不要突破1200px，否则就“危险”了。

网格系统中值得注意的是，有人会严格按照12列，每列60px，边栏宽10px这种做法来应用到设计过程中。但其实当我们真正明白网格在前端设计中的原理的时候就完全可以打破这个约束框架。你只要保证所有列是等份并且列的间隙也是等份，并且保证它们是偶数（除以2之后还是整数）。

自适应和响应式

自适应网页设计（Responsive Web Design）最早是由Ethan Marcotte在2010年提出，是指可以自动识别屏幕宽度、并做出相应调整的网页设计。

随着移动化网页需求的增长，在自适应基础上又诞生了响应式网页设计（Adaptive Web Design）。

两者最大的区别在于

• 前者只根据浏览器宽度作出布局的调整，后者是根据设备的不同而作出的调整。
• 前者的调整只停留在左右上下位置上的调整，后者涉及到内容的增减等。

在这项技术的支持下，我们现在能看到很多网站把最大主体区域做到了1600px，但同时又支持手机正常显示。1920*1080分辨率下的Behance网站主体区域占到1600px的宽度iPhone上的Behance在改变布局样式之外，额外在顶部添加了下载安装应用的提示

网格系统在响应式设计中同样是起作用的。当然，根据不同主体区域大小你需要多套网格系统同时运用。

在做响应式设计之前，你需要确定好需要在那些结点做变化。也就是当窗口大于这个尺寸时候是什么样子，当小于这个尺寸又是什么样子。确定有几个节点，这些节点内的网格系统是什么样的等具体的排布问题。

Bootstrap是一套支持响应式的前端框架，我们可以从对它的研究中来寻找响应式设计的一些技术支持。从文档中我们看到Bootstrap分了三个结点，四种布局，分别对应台式显示器、笔记本、平板电脑和手机。

因为它是一个框架，需要支持尽量多的自定义，所以每种布局都运用了12栏的网格系统，我们在实际项目中并不需要如此统一的划分。比如在手机中，一般都会上下堆砌，最多不会超过3栏。

关于网页的基础布局问题可以讲的还有非常多，960虽然已经使用多年，但在个人博客或者一些地方还是有着非常广泛的使用，其中的门道也是非常的多。

至于响应式设计，需要关注的点更是随着判断情况的增多而需要考虑的也更为复杂，比如导航栏、图片、内容的样式的变化及信息的删减等。

这些内容以后有机会我会慢慢再跟各位分享～

更多设计文章，欢迎关注我的博客「猫屋羊舍」，地址：http://sjfan.net，定期为你带来设计文章。