前言，针对响应式布局方案，设计师推荐使用栅格系统设计页面。如果不采用栅格方式那就直接参考约定给于的网页尺寸即可。
------------以下内容---------------
栅格化设计是把网页分格成相同宽度的区域，列出很多排列组合可能性，在不同设备屏幕上可以很容易达到完整展现的目的。
下面是一个12列栅格布局，页面整体很有规则性，内容按照栅格排列。
以下是4种适用于不同尺寸设备屏幕的方案。
- 超小屏幕 手机 = 750px (参考retina屏解决方案)
- 小屏幕 平板 = 720px
- 中等屏幕 桌面显示器 = 940px
- 大屏幕 大桌面显示器 = 1140px
PSD模板文件下载
建议使用最新版Photoshop CC 2015，因为支持画板功能。
下面的页面使用的是我们事先约定好的12列栅格系统的设计。
grid = 栅格数
整体对比图
｜
栅格线对比图
例子中利用栅格数量的变化，使得布局发生改变，达到适应屏幕布局的目的。一行中总栅格要等于12，不能多也不可少
设计师一定确保内容不得超出栅格线以外，确定内容块所暂用栅格数，这样前端有依据在不同尺寸下用控制栅格数，达到自适应的目的。
手机端设计稿基准尺寸为375px，普通屏显示正常，但在retina屏幕下会出现图片模糊问题。
对于retina屏幕，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）所以手机端设计稿尺寸是750px
参考移动端高清、多屏适配方案。