html还原ui,前端如何百分百还原美工图?

不知道你是怎么量的，我简单说下我的思路吧。

首先美工图如果是psd，那么想避免误差拿到尺寸最好就是用ps(除非有标注……)。ps建议装最新的cc2015，对前端切图相当友好~

装好以后打开设计稿做预处理：把各个需要独立切开的组件扔进一个组里(便于导出)，然后裁切一下页面边缘(避免有超出设计页面的东西导致测量误差，这个我一般习惯用工具栏里的裁切工具，选中后有个设置比例的下拉列表，选择宽高分辨率，然后直接把设计稿默认宽高填上、分辨率写72就ok了。不管裁切范围怎样，系统都会帮你把裁切区域里边的东西自动转好)，然后就可以开工了。

在每一个图层/分组(就是要独立导出的部分)上点右键，选择那个“导出为...”然后选择导出格式(当然也可以在首选项里设置下快速导出的格式，之后直接用“导出为xxx”就行了)，选完后直接导出，这时候可能会卡一下，是ps自动在压缩图片。ok之后把原图拖进设计稿和原始位置重叠住，选择拖进来那个层，按住ctrl，尺寸就出来了！如果不是想要的还可以动动鼠标，ps会切换显示各种距离尺寸……后边就不用说了吧？自己写定位就好。

最后说一句个人不推荐直接复制css，出来的代码乱七八糟一般没法直接用，还不如这么手工量一下记下来就好。另外导出的东西务必拖进来再量，因为我发现用工具栏上的选择工具的定界框和导出的素材边缘部分并不一定是一样的，所以保险起见还是要拖进来量一下避免有误差……

手机打的，不得不说sf的手机端体验真的好渣啊……我在网页端又重排了下格式，看起来应该不会太累了~