与960 Grid System相关的那些问题
为什么是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
与960 Grid System相关的那些问题的更多相关文章
- compass安装使用960 Grid System
960 Grid System 是一个CSS的页面布局框架 demo: http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem ...
- 使用Photoshop+960 Grid System模板进行网页设计
前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符 ...
- Bootstrap3 Grid system原理及应用
刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- 960 grid 使用
去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=” ...
- BootStrap -- Grid System
<script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...
- [转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
随机推荐
- 测试常用——linux 基础命令
测试常用 的 linux 基础命令 1,查看服务器日志vi 查看文件(查找关键字:exception/exception : 从上往下找,按n查找下一个关键字,按shift+n查找上一个关键字?e ...
- JWT(JSON Web Token) 多网站的单点登录,放弃session 转载https://www.cnblogs.com/lexiaofei/p/7409846.html
多个网站之间的登录信息共享, 一种解决方案是基于cookie - session的登录认证方式,这种方式跨域比较复杂. 另一种替代方案是采用基于算法的认证方式, JWT(json web token) ...
- k8s 资源管理
对应到Kubernetes的Pod容器上,就是下面这4个参数:◎ spec.container[].resources.requests.cpu:◎ spec.container[].resource ...
- 剑指offer——59二叉搜索树的第k大节点
题目描述 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. 题解: 考察的就是中序遍历 不过注意进行剪枝 cl ...
- 用js onselectstart事件鼠标禁止选中文字
禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...
- PhotoShop的10大误区
一.使用错误的图像模式 操作菜单变成灰色?颜色看起来不对劲?当你遇到这些问题的时候,应该停下来,不要再编辑.这些可 能就是使用错误的图像模式而引起的问题.在主菜单中选择“图像>模式”,在这里确保 ...
- Java中的注解是如何工作的?
自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述 ...
- git常用操作笔记
这是我看了廖雪峰的git教程,写的笔记,仅作为一个学习的记录 一.大多数我们面临的是已经有一个进行中的项目了,我们只需克隆下来就可以了 1.安装git,安装完后,可输入git,回车,查看是否已安装 2 ...
- dp思维
题目传输门 题意:有n个房间,m个诅咒,每个房间有一个数值,刚开始有一个初始值,每次进入一个房间可以选择消除诅咒或者不消除,消除诅咒只能顺序消除,消除诅咒就是拿初始值和房间的数值做运算,求最后最大的数 ...
- python接口自动化(put请求)
python接口自动化(put请求) 一.put请求的作用:更新资源 二.应用 导包:import requests 调用requests.put()方法 参数有URL.data.headers,方法 ...