细谈设计稿还原
按道理来说，做重构切页面那本来就是要还原设计稿啊，没话说。但是如果设计师真的细究到0px还原，那还真不是个小事。
首先一个网站落到PS中，都是图片或文字（附加对图片或文字进行相关处理），而对应到重构来说就是一个个元素，所以要做到还原设计稿，主要要解决下面这三个问题：
- 元素大小
- 元素与元素之间的间距
- 元素在页面的位置
下面对上面问题一一详细展开
元素大小
先来说下元素大小的问题，对于图片类的来说我们就要获取图片在PS中的正确大小，这一般来说百分之八十都没什么问题，除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定；而对于文字来说，那就是文字大小了，但是还有个不能忽略的字体问题，同一个大小不同字体可能相差十万八千里。
总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。
对于第一点为了准确性及效率，我们可以采用 Cutterman这个PS插件；而第二点我们就得使用规范去约定，约定网站常规字体类型及大小
元素之间的间距
既然网站从视觉上表现出来的就是图片与文字，那么间距总体来说就是分为三种情况了：图片与图片的距离，图片与文字的距离，文字与文字的距离。
为了得到元素之间的间距，首先我们得有个工具来测量，当然PS默认提供了标尺这个工具来供我们测量，但是实际使用起来还是有点麻烦的，效率不怎么高，而QQ提供的截图效率是快了，不过精准度方面就有点欠缺了，如果真要仔细考究起来那就得使用其他更精准效率也高效的工具了，这里推荐下Markman。
看起来挺完美的，我们用Markman一标，间距就搞定了。事实是视觉上的图片与图片的间距确实就是这么简单，但是换到有文字的时候这招就不怎么灵验了，因为文字还有个行高。而行高也是个很复杂的事，光这个行高问题就可以写一篇文章了，这里就不再细叙，具体可参看：
- 深入理解CSS中的行高——简版
- 深入理解CSS中的行高——ppt详细版（要访问外国网站）
所以如果要解决这个间距的问题，还得让设计师设计的时候就考虑到行高这一因素，然后你还要熟记常规行高的半行间距（半行间距不同浏览器还可能表现不一样），标记的尺寸再减去这个半行间距就是实际的间距。
总之这个问题（图片与文字的间距，文字与文字的间距）细究起来是非常令人抓狂的。
元素在页面的位置
这个相对于前面的来说应该是最简单的问题了，熟练运用各种布局技术一般就能解决百分之九十九的问题了，当然也还有些特别不合理的，那就需要改交互了。总之这个问题是可以通过技术来解决的问题，所以不是问题。
为了准备的跟踪是否还原，我们还有比对工具来查看效果（原理都是把PS图片遮盖在上面，设置一个半透明效果），
仔细研究下就会发现这些都与layout相关，而与paint相关的还原起来还是比较简单的（各种取色器网上大把的有，PS里面的当然是最准的了）。
写在最后
那么是不是就完了呢？我们是不是要追溯下设计稿本身呢？如果设计师设给的稿子本来就是经不起推敲的呢？
假设我们设计师给的稿子都是认真完成的，我们还可能面临以下问题：
- 设计师水平本身不在同一条水平线上，不同的设计师审美效果不太一样。
- 设计师的像素真的是完美的吗，出现小数点像素怎么办？
- 设计师的有些设计到底是故意为之还是出了点小差？
- 移动端各种手机尺寸，只给一个标准的，其他自由发挥怎么搞？
所以最后如果要细究到0像素还原，最艰难的问题只有两个：文字的问题；完美的设计稿。