1200px网页设计 第1篇
固定栅格示意
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
3. 混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
一些做的很酷的栅格系统
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽，下面是一些在设计中使用栅格系统做的很棒的设计灵感。
Dropbox Design
使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。
The Mockup Club
我非常确定的说，Instagram的PC端是用上了6列栅格布局。
最后，写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，半人马花了很多年的时间写了大量的网页前端代码来理解栅格系统是如何工作的。学习了很多技术类书籍和教程，我知道很多人都在关注它为什么重要，却不知道其所以然和如何去使用它。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，如果是网页设计师或者UI设计师，半人马的建议是你最好学习一下基本的前端代码比如html和css,你将会开始看到这些网格是如何工作的。这对于你的专业是具有很大的帮助的。不再盲目限定于设计软件如photoshop给你的画布大小，而茫然，然后在群里问我该设计多大的块？哈哈
希望这篇文章对大家有帮助。
文章中的图片来源于网络，如有侵权请联系我删除！返回搜狐，查看更多
1200px网页设计 第2篇
一个好的网页一定要有好的内容和布局形式，内容的设计一定要注意运用对称美、节奏美和留白等等。通过空间、文字、图形等之间的相互关系巧妙地建立整体的均衡状态，让之产生和谐的美感。
头部区域——top或header
Logo、主导航、搜索、注册、登录、版本等信息。
主视觉区——banner
展示公司品牌形象、新品宣传、主题活动等轮播大图。
主要内容区——main
新闻动态、产品与服务、公司介绍等。
底部信息区——footer
网站地图、联系我们、版权信息、ICP备案号等信息。
我们对Pixso社区中的主页进行拆分可得：
1200px网页设计 第3篇
中文常用字体：宋体-字体样式（无）、微软雅黑-字体样式（Windows LCD）、苹方（MAC）
英文常用字体：Times NewRoman、Arial、sans
中文字常用字号
导航文字大小：14px、16px、18px、20px；
正文内容：12px、14px；
标题：22px、24px、26px、28px、30px；
辅助信息：12px、14px；
英文字常用字号
标题和内容文字10-16px；中英文结合最小12px；全英文网站最小10px（比如底部信息）；
Pixso 内置了多个免费可商用的中文字体，例如思源黑体、站酷快乐体、江西拙楷体等，无需手动安装即可使用，应用到商业设计项目中无侵权风险。
如果Pixso的云端字体库不能满足你的需求，还可以安装「字体助手」，从本地导入电脑上安装的字体，给你的设计提供更多样化的选择。