设计稿分为哪两个部分

1、psd设计稿是用psotoshop做的设计稿，有图层的，保存时保存psd格式，这样要修改的时候直接用PS打开就可以针对每个层进行修改了，保存成JPG格式就不好修改了。

2、PSD--Photoshop Document（PSD），是著名的Adobe公司的图像处理软件Photoshop的专用格式。这种格式可以存储Photoshop中所有的图层，通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中包含有层，则一般都用Photoshop（PSD）格式保存。PSD格式在保存时会将文件压缩，以减少占用磁盘空间，但PSD格式所包含图像数据信息较多（如图层、通道、剪辑路径、参考线等），因此比其他格式的图像文件还是要大得多。由于PSD文件保留所有原图像数据信息，因而修改起来较为方便，大多数排版软件不支持PSD格式的文件。

1有针对性的设计，这类设计可以出售给相应的平台。例如室内设计稿，那么有某些平台是专门收这类设计稿的可以投稿。

2广泛投稿，对于这类情况。我们可以把稿件发布在众多平台。通过下载或者浏览获取平台佣金。

3专业对接平台，跟第一类类似。但是更垂直，直接与需要的公司或个人洽谈，价格合适后直接出售即可。

如果能力比较强，可以开个设计店铺，专门出售自己的技能服务。相信，岁谢谢自己的努力，会找到更好的平台。

在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后，在大家的实际工作中或许能帮助解决一些问题。

一般设计稿是 640px 或者 750px （现在最流行），但是 iPhone 5 不是 320px 宽吗，iPhone 6 不是 375px 宽吗?

这里需要理解一下基础概念： 设备像素 (device pixel)， CSS 像素 (css pixel)以及 设备像素比 (device pixel ratio)。

垂直手机屏幕下，使用 <meta name="viewport" content="width=device-width"/>，iPhone 5 屏幕物理像素 640 像素，独立像素还是 320 像素，因此， window.devicePixelRatio 等于 2。

比如 iPhone 5，6 使用的是 Retina 视网膜屏幕（2 倍屏），6 Plus 是 3 倍屏，使用 2px × 2px 的 device pixel 代表 1px × 1px 的 css pixel，所以设备像素数为 640 × 1136px （5）， 750 × 1134 （6），而 CSS 逻辑像素数为 320 x 568px （5）， 375 × 667 （6）；5，6 的 window.devicePixelRatio=2，6 Plus 为 3。

H5 适配：rem 方案

rem：是 CSS3 新增的一个相对单位，相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置，从而达到自适应屏幕的目的。

我这里找了一下 小米 ， 网易 ， 拉勾网 ， 手淘 以及糯米，大同小异。

设计稿是 720px 的，即 5 英寸屏幕的安卓手机（720 x 1280px）。

对于页面缩放和横竖屏事件进行监听，改变 html 根元素字体 clientWidth/720/100 。

如图是这样计算的 375/(720/100) = 52.0833

iPhone 6 : 375/7.5=50 , 则知道设计稿应该是基于 iPhone 6 来的，所以它的设计稿竖直放时的横向分辨率为 750px，为了计算方便，取一个 100px 的 font-size 为参照，那么 body 元素的宽度就可以设置为 width: 7.5rem ，于是 html 的 font-size=deviceWidth / 7.5 。布局时，设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 font-size 也可用 rem 单位。

设置html根元素字体为 65.5% ，对应px单位则为 10.48px ，则列表里时间信息字体设置为 1rem = 10.48px ，chrome在 -webkit-text-size-adjust: 100%情况下小于 12px 的一律显示为 12px 。

拉勾网页面列表部分是 px 为单位，字体是 rem ，底部bar是使用 百分百 来控制宽高间距。

之前网上讨论的比较多的是

则 1em = 16px * 62.5% = 10px ，em 的初始值为 1em = 16px ，而为了方便计算， 换算一下 10 / 16 （16px 是 Chrome 浏览器默认字体大小）。缺点是进行任何元素设置，都有可能需要知道他父元素的大小，比较繁琐低效。

（1）动态设置 viewport的scale

（2）动态计算 html 的 font-size

（3）布局的时候，各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10

设计稿是 750 的，所以 html 的 font-size 就是 75，如果某个元素是 150px的宽，换算成 rem 就是 150 / 75 = 2rem。

整个手淘设计师和前端开发的适配协作基本思路是：

手淘推出了一套移动端适配的方案—— Flexible 方案 。

总结来说：

设计稿是 750 的。

优点：简单粗暴，所有 css 尺寸均为设计稿尺寸直接除 2，开发快速简单；

缺点：可能出现一排放不下的情况，需要针对小屏幕如 5 及以下做单独适配

vw 相对于视窗的宽度：视窗宽度是 100vw 。

如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%，类似于 width: 1%。

那 iPhone 6 来说， document.documentElement.clientWidth=375 , 则豆腐块宽度为 375/100*30=112.5px

混合: rem px vw 百分百等单位混用

略，同上糯米WAP

这里假设设计稿 640px，则设置根元素 font-size 为 4.375vw，根据屏幕宽度自适应，在视窗宽度为 320px 的时候，正好是 14px (14 / 320 = 0.04375)。 达到页面默认字体大小 14px 的目的（其他大小也 ok）。好了，现在页面上所有以 rem 为单位的属性值都会随着屏幕的宽度变化而变化，达到自适应的目的。（ 自适应不用 js 动态设置根元素大小 ）

在移动端页面开发中，视觉童鞋一般会用 750px（iPhone 6）来出设计稿，然后要求 FE 童鞋能够做到页面是自适应屏幕的，这种情况下就可以用 rem 或者 vm 等相对单位来做适配，愉快和视觉童鞋一起玩耍啦。

内容转自： 大专栏

1、考虑PSD文件存储大小

之前小编一直遇到一个问题，PS文件本身并不大，但是保存PSD文件后异常大。前端在切图操作时，电脑会变得非常的卡，从而影响PS的运行速度，降低工作效率。后来小编尝试了各种办法，终于知道了是什么原因。是因为在PS操作过程中，对文档进行了过多的操作，就造成文档保存了历史图像多余的操作数据。而解决这个问题的方法也很简单，只要导入一段代码即可，就可以把多余的操作数据清除掉。

2、整理图层

最后的设计稿要确保图层是清晰的，不要把一长串没有命名，而且没有分组的设计稿发给前端。要确保每个图层都命名，把不必要的图层删除，将对象组织成组，一些特殊的组或图层标注颜色，给前端一个明显的区分。

3、文件命名清晰

PSD设计稿合理命名文件名称，例如：A1首页、B2关于我们等等，这样别人也可以清晰快速的找到所需的设计稿。客户修改页面时，只需按数字向下排列就可以，例如：A2首页、A3首页......就会简单的知道那个页面时客户最后的定稿文件。