解决这13个问题，可以实现99.9%的设计稿还原

首先，从主题的角度来看，为什么不恢复100%的设计草案呢？事实上，100%是一种理想的状态。大多数设计师不理解“页面重构”。大多数时候，设计师在设计时会关注视觉因素，而不会特别仔细地考虑成本。面对这些设计细节，浏览器兼容性、开发周期、背景数据循环因素等都会影响设计草案的恢复效果。我们所能做的就是尽可能地恢复设计草案，无限地恢复近100%，而不是追求100%的恢复效果。

首先，从主题的角度来看，为什么不恢复100%的设计草案呢？事实上，100%是一种理想的状态。大多数设计师不理解“页面重构”。大多数时候，设计师在设计时会关注视觉因素，而不会特别仔细地考虑成本。面对这些设计细节，浏览器兼容性、开发周期、背景数据循环因素等都会影响设计草案的恢复效果。我们所能做的就是尽可能地恢复设计草案，无限期地恢复近100%，而不是追求100%的恢复效果。有些人可能会拒绝接受，我会100%恢复，所以好吧，ps和浏览器中相同字体的显示效果是不同的，你该怎么办？文本也被切割成图片吗？因此，在大多数“页面重建”中，最负责任的方法是在考虑易用性和合理性的前提下，尽可能恢复99.9%的设计草案。

重建工作不是前端工程师的工作，而是与设计师、后台工程师（php等）和产品的沟通，可能涉及设计图纸的修改。

以下是页面重构中的一些问题：

1.页面宽度问题

目前主要分辨率一般在960以上:960、1000、1200等，这些都属于正常尺寸，但也有类似973的设计师、1011等奇妙尺寸... 我不好意思把这个问题拿出来说，太低级了。当然，奇妙的单数行高、不同大小的相同元素等都是类似的问题。

2，毛边问题

一个方形按钮，有一圈毛边。这个问题在重构中也很常见。虽然这个问题在写页面时很容易避免，但它看起来不是很不舒服吗？请参见下图：

正常边缘给人一种整洁干净的感觉，边缘看起来模糊，很容易导致按钮高度不清晰。如果需要切割半透明按钮，也会导致图片体积增加，因此应避免此问题。

3，图层模式

在一些设计图纸中，一个元素，如一个按钮，需要切割png半透明图片，但这个按钮实际上是与背景图片的底部或颜色叠加。每当我遇到这个问题时，我都有自杀的冲动，所以为了世界和平，我们必须避免这个问题。

4，图层链接

有时页面重建需要选择一些层来移动，结果发现移动坏了，许多其他元素跟随刷子移动，立即感到无力，默默地取消层链接。不需要的层链接，可以取消。

5、某些图片的大小

例如，在一些列表中，缩略图的大小经常会遇到奇怪的大小，如119*73。事实上，最好使用整数：120*80等，这对网格化、响应式页面和后台图纸剪切和图纸保存有很大的好处。

6.图层命名和文件夹

同样，上述问题只是许多问题的一小部分，将来会逐渐补充。解决各种问题的最好方法是：更多的沟通。