其实很多小伙伴都觉得响应式布局贼难搞，又要考虑电脑端，又要兼顾手机端，感觉脑子都不够用了。不过别慌，美美今天教你几招，保证让你设计起来超easy！
第一招：设计稿分层要清晰⭐
首先咱们要养成一个好习惯 - 科学分层 。这就跟收拾房间一样，东西乱糟糟的肯定不好找。我习惯这么分：
最顶层：导航栏、Logo（命名nav） 中间层：主要内容（命名content） 底层：背景元素（命名bg）
每个大类里面再细分，比如content下面再分banner、products等等。这样做有什么好处呢？等你要调整移动端布局的时候，想找哪个元素都特别快！
第二招：使用智能参考线⭐
很多人不知道PS里面有个贼好用的功能 - 智能参考线 。快捷键是Ctrl+R（Mac是Command+R）。
我一般会设置这几条参考线：
960px（PC端主体内容） 750px（平板设备） 320px（手机端）
这样在设计的时候就能直观看到不同设备下的显示效果啦！
第三招：栅格系统是好朋友⭐
记住一个超好记的数字：12！为啥是12？因为它太好除了！可以除以2、3、4、6，简直就是响应式布局的完美数字。
在设置参考线的时候，我会把960px均分成12份，每份就是80px。这样设计起来就特别有规律：
全屏：12格 半屏：6格 三分之一：4格 四分之一：3格
第四招：留白要讲究⭐
很多小伙伴设计PC端的时候恨不得把空间全塞满，结果到了手机端就超级难看。美美教你一个小技巧，设计的时候预留15-20%的留白空间，这样等内容自适应的时候就不会显得特别拥挤。
具体操作是啥呢？
新建画布的时候稍微放大一点 把核心内容控制在80-85%的范围内 两侧预留足够的padding值
终极大招：巧用智能对象⭐
这个技巧简直是救命稻草！把需要自适应的元素全部转换成智能对象（右键图层-转换为智能对象）。这样做有两个好处：
随便怎么缩放都不会失真 可以快速替换不同尺寸的素材
特别是在处理产品展示、banner图的时候，用智能对象实在是太省事了！
注意事项⭐
字体大小要适中，PC端正文别小于14px 图片记得输出多个尺寸版本 重要元素不要靠太边缘 移动端记得预留手指触摸区域
记住美美说的这些小技巧，保证你下次做响应式设计，分分钟就能搞定！如果你觉得这篇文章对你有帮助，别忘了给我点个赞噢！
最后友情提醒：做设计最重要的不是技巧，而是多练习。美美经常说：“光看不练假把式”，所以赶紧打开PS动手试试吧！
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
