为什么是960px?

一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息。

我们首先会考虑的是全屏自适应,但这并非一个好的解决方案。一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度;另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大。自适应宽度也就意味着一行显示的文字数是不定的,阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了。因此,固定页面宽度比自适应更常用。过去,信息闭塞独立思考的我们会考虑用主流屏幕宽度-20px(IE中左右边框+滚动条的宽度)。在1024*768的分辨率下,页面宽度应该为1004px。但过不了多久,很多人便意识到,有一个更好的宽度——960px。

960 = 2^6*3*5。与1004这个无厘头的数字相比,960能够被12、15、16、24整除,得数分别为80、64、60、40,这些数字听着就和谐而且靠谱。因此960非常适合于使用栅格设计系统进行网页设计。

为什么要用栅格设计系统?

栅格设计系统,即Gird System(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

栅格设计系统在印刷出版物的排版设计中十分普遍,网页设计常会从印刷排版中汲取灵感。在网页设计中采用栅格设计系统不单能够继承工整简洁的风格,还能大大的减少设计的工作量;从前端工程的角度来说,这种排版方式优点不言而喻:天然的规范性和可重用性。从整个团队来看,使用栅格设计系统能简化工作流程,便于交流,也便于分工和统一风格。


这是使用3*3的网格的960px页面设计草图,来自“The Principles of Beautiful Web Design”

960px是唯一的么?

960是否是唯一最优的页面宽度呢?当然不是。目前使用栅格系统的页面的宽度并不严格就是960px,也可能是950px,例如yahoo的YUI框架就是950px。关于网页栅格系统设计的介绍可以看看TaobaoUED的这篇文章。1024*768也不会永远是主流分辨率,随着分辨率的发展,下一个较优宽度很可能是1440(2^5*3^2*5),或者是一个没有分辨率的时代,页面能够按比例自动缩放(就像现在在移动版safari看到的那样)。另外,好的设计和创意常常需要打破规则,栅格设计系统也并非网页排版唯一可用的风格,在主流之外会一直存在一些很优秀的非960px页面(尤其是全flash网站);有时候人们会议论他们seo上的缺陷,或者兼容性、用户体验不够好,但从艺术的角度上他们依然很优秀。

为什么用960 Grid System?

960 Grid System是由Nathan Smith开发的CSS框架,有12列、16列、24列三个版本。CSS对于很多程序员来说可能完全不屑于优化,但它确实和其他的程序代码一样需要架构和优化。即使运营的是一个很小的网站,适当地组织、重用CSS代码能够节省相当多的时间和成本。CSS框架正是那个能让你在每个网站都屡试不爽的东西,把那些无聊重复的工作都交给它们吧,把自己的精力集中在怎么创造更令人动心的设计上!

而且,960 Grid System不仅仅提供了CSS框架,它还提供了可打印的缩略图表,Firewofks、Phototshop、OmniGraffle 和Vision的模板源文件⋯⋯你可以让项目组的很多人都用上它。

它也能为你减少了很多兼容性问题,它支持被yahoo评为A级别的浏览器:

用960 Grid System做出来的东西好看么?

这个问题很有现实主意色彩。使用960 Grid System创造好网站的能力毋庸置疑,在它的网站上列出了许多成功案例。此外,wordpress用户熟悉的WooThemes也用了960Grid System。

具体到中文的环境中,每个设计师都有自己的判断。例如我自己觉得16列的网格系统比较适合中文企业网站,你可能会有别的看法。但是并不是用了它就一定能创造出令人满意的网页。“Frameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.(框架只是帮助人们获取解决解决方案的工具,不是解决方案本身。它取决于设计师和开发者如何驾驭class和div)”。

对于开发者来说,用框架总好于不用。还有很多优秀的CSS框架可用。960 Grid System是一个比较单纯的框架,它不关心字体、颜色⋯⋯你可以为自己的网站定制一份字体颜色的框架。但框架也意味着难免会有一些你用不上的样式,如果你的网站很在意这方面的问题,需要谨慎考虑使用框架。

最后,值得一读的一些参考文章

彬Go的文章:
960网格系统(翻译)
960 Grid System 基本原理及使用方法(翻译) 》
使用Photoshop+960 Grid System模板进行网页设计 》
精选15个国外CSS框架

一些经典的使用教程
Fight Div-itis and Class-itis With the 960 Grid System
Prototyping With The Grid 960 CSS Framework

ps:http://www.youxiangfa.com/ui/about-960-grid-system/(Dreamer)

与960 Grid System相关的那些问题的更多相关文章

  1. compass安装使用960 Grid System

    960 Grid System 是一个CSS的页面布局框架 demo:  http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem ...

  2. 使用Photoshop+960 Grid System模板进行网页设计

    前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符 ...

  3. Bootstrap3 Grid system原理及应用

    刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...

  4. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  5. 960 grid 使用

    去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=” ...

  6. BootStrap -- Grid System

    <script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...

  7. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  8. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  9. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

随机推荐

  1. CSS:CSS 边框

    ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border ...

  2. 强制关闭redis快照出现的异常

    https://blog.csdn.net/weixin_42781180/article/details/81950187

  3. C++——指针与引用

    1.指针本身为对象,引用只是对象的别名.故有指针的引用,没有引用的引用,没有引用的指针.指针必须指向一个实际的对象.引用也必须是实际对象的别名. 2.允许指针赋值和拷贝,指针可指向不同的对象 3.指针 ...

  4. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...

  5. 51nod1787最大子方阵

    51nod1787最大子方阵 我在51nod上面切的第一道题 我在51nod上面切的第一道8级题 我在51nod上面切的第一道8级题的一血 题目大意 有一个n*m的矩阵,矩阵中的每一个元素是'X'或者 ...

  6. 常用内置模块(二)——logging模块

    logging模块 一.logging作用 1. 控制日志级别  2. 控制日志格式  3. 控制输出的目标为文件 二.日志级别 logging.debug( logging.info( loggin ...

  7. 深入浅出原生JS:One

    Arguments 对象: 在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. 例如,在函数 sayHi() 中,第一个参数是 message.用 argumen ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  10. eclipse 在复制/粘贴 时很卡(转)

    最近发现eclipse在按Ctrl+C 时卡的要命,在网上找了一下,发现原来如此: 打开选项: Window -> Preferences -> General -> Editors ...