为什么是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. 【二叉树】二叉树常用算法的C++实现

    常见算法有: 1.求二叉树的最大深度 2.求二叉树的最小深度 3.二叉树的层次遍历 4.二叉树的前序遍历 5.二叉树的中序遍历 6.二叉树的后序遍历 7.求二叉树的节点个数 8.求二叉树的叶节点个数 ...

  2. mtk_Call setting(SS)

    1.SSDS: 2.PDN type 3.server回error之后的处理通过UT接口设置SS之后,网络有时候会回error,有些运营商会根据这些error来决定是否要CSFB, CSFB的条件如下 ...

  3. pymysql连接mysql报错

    pymysql模块操作数据库及连接报错解决方法   import pymysql sql = "select host,user,password from user" #想要执行 ...

  4. 43-Ubuntu-用户管理-08-chown-chgrp

    1.修改文件|目录的拥有者 sudo chown 用户名 文件名|目录名 2.递归修改文件|目录的主组 sudo chgrp -R 组名 文件名|目录名 例1: 桌面目录下有test目录,拥有者为su ...

  5. 3-Windows-CMD启动mysql服务-连接本地mysql服务-连接远程mysql服务

    转自: https://jingyan.baidu.com/article/84b4f565b77a5660f6da32d4.html 备注: 如果在连接远程mysql服务,无法连接时,可能是远程my ...

  6. Install .NET Core Runtime on Linux Ubuntu 16.04 x64

    原文链接https://www.microsoft.com/net/download/linux-package-manager/ubuntu16-04/runtime-current nstall ...

  7. xinetd - 扩展的互联网服务守护进程

    总览 SYNOPSIS xinetd [options] 描述 DESCRIPTION xinetd 执行与 inetd 相同的任务:它启动提供互联网服务的程序.与在系统初始化时启动这些服务器,让它们 ...

  8. mongodb java操作常用写法

    MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组.下面介绍的是用java操作 ...

  9. vue生态系统之vue-router

    一.vue-router安装与使用 1.安装 进入项目目录中安装vue-router模块 E:\vueProject\webpackProject>cnpm install vue-router ...

  10. Tomcat 调优的技巧

    转载:www.cnblogs.com/wangsen, https://mp.weixin.qq.com/s/WrIsOOyR7o4SwSXMT0Zecg 最近,看到一篇讲述 Tomcat 调优的文章 ...