首先從題目來(lái)說(shuō)，為什么不是100%設(shè)計(jì)稿還原?其實(shí)100%是一個(gè)理想的狀態(tài)，有很大一部分設(shè)計(jì)師是不懂“頁(yè)面重構(gòu)”的，很多時(shí)候設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，會(huì)著重考慮視覺(jué)因素，實(shí)現(xiàn)成本考慮的不會(huì)特別仔細(xì)。面對(duì)這些設(shè)計(jì)細(xì)節(jié)，瀏覽器兼容、開(kāi)發(fā)周期、后臺(tái)數(shù)據(jù)循環(huán)因素等等都會(huì)影響到設(shè)計(jì)稿的還原效果，我們能做的就是盡可能的還原設(shè)計(jì)稿，無(wú)限接近100%還原，而不是追求100%的還原效果。可能有些人會(huì)不服，我就要100%還原，那么OK，ps中和瀏覽器中相同字體顯示效果不一樣，你怎么辦?難道文字也全切成圖嗎?所以在大部分“頁(yè)面重構(gòu)”的時(shí)候，最負(fù)責(zé)任的做法是，在考慮易用性、合理性的前提下盡可能的實(shí)現(xiàn)設(shè)計(jì)稿99.9%的還原。

重構(gòu)的工作并不是前端工程師一個(gè)人的工作，還要包含與設(shè)計(jì)師、后臺(tái)工程師(php等)以及產(chǎn)品之間的溝通，中間很可能會(huì)涉及到設(shè)計(jì)圖的修改。

下邊從幾個(gè)方面聊聊頁(yè)面重構(gòu)中的一些問(wèn)題：

1，頁(yè)面寬度問(wèn)題

主要內(nèi)容部分，目前主要的分辨率一般都在960以上：960、1000、1200等，這些都屬于正常的尺寸，但也有設(shè)計(jì)師做出類似973、1011等奇葩尺寸… 這個(gè)問(wèn)題我不太好意思拿出來(lái)聊，太低級(jí)了。當(dāng)然，奇葩的單數(shù)行高、相同元素不同大小等等這都是屬于相似問(wèn)題。

2，毛邊問(wèn)題

一個(gè)方方正正的按鈕，帶著一圈毛邊。這個(gè)問(wèn)題也是在重構(gòu)中經(jīng)常看到的事情，雖然這個(gè)在寫頁(yè)面的時(shí)候可以很輕易的避開(kāi)這個(gè)問(wèn)題，但是不是看著很不爽?看下圖：

正常邊給人的感覺(jué)整齊干凈，毛邊顯得邊緣模糊不清，并且容易造成按鈕高度不明確。假如是半透明按鈕需要切圖的時(shí)候，還會(huì)造成圖片體積變大，所以這個(gè)問(wèn)題應(yīng)當(dāng)避免。

3，圖層模式

有些設(shè)計(jì)圖中，某個(gè)元素例如某個(gè)按鈕，需要切png半透明圖片，但是這個(gè)按鈕居然跟背景圖是正片疊底或者顏色疊加。每當(dāng)我遇到這個(gè)問(wèn)題的時(shí)候會(huì)有一股想自殺的沖動(dòng)，所以為了世界和平，這個(gè)問(wèn)題一定要避免。

4，圖層鏈接

頁(yè)面重構(gòu)的某些時(shí)候需要選擇某些圖層進(jìn)行移動(dòng)，結(jié)果一動(dòng)發(fā)現(xiàn)壞了，好多其它的元素跟著刷刷移動(dòng)，瞬間感覺(jué)無(wú)力，默默的一個(gè)個(gè)取消圖層鏈接。不需要的圖層鏈接，能取消就取消吧。

5，某些圖片的尺寸

例如在某些列表中，縮略圖的尺寸，經(jīng)常會(huì)遇到119*73等等奇怪的尺寸。其實(shí)這種最好是用整數(shù)：120*80等，對(duì)頁(yè)面的柵格化、響應(yīng)式以及后臺(tái)裁圖存圖等都有很大的好處。

6，圖層命名和文件夾

這個(gè)其實(shí)跟題目關(guān)系不大，但這里要提一下。舉個(gè)例子：

你喜歡哪個(gè)?不用說(shuō)了吧…

7，奇葩的邊距和填充

同等級(jí)的模塊，從視覺(jué)及內(nèi)容上都屬于同一類型，但上下邊距一個(gè)20px一個(gè)27px，左右填充一個(gè)10px一個(gè)7px，這種問(wèn)題跟“1.頁(yè)面寬度問(wèn)題”類似，都屬于低等級(jí)問(wèn)題。

8，需要運(yùn)營(yíng)的文字內(nèi)容使用特殊字體

這個(gè)請(qǐng)google一下網(wǎng)絡(luò)安全字體，中文的安全字體少的可憐，放過(guò)非設(shè)計(jì)師的頁(yè)面使用者吧。

9，不做極限設(shè)計(jì)

假如要設(shè)計(jì)一個(gè)按鈕，放在某個(gè)比較小的模塊里，那么請(qǐng)考慮一下按鈕包含的字?jǐn)?shù)最長(zhǎng)的情況下是怎樣的。再比如一個(gè)類似微博名片的東西的簡(jiǎn)介，設(shè)計(jì)圖中做了30個(gè)字，那么請(qǐng)考慮下100個(gè)字的情況。假如需要做截字，請(qǐng)規(guī)定多少字或者幾行字開(kāi)始截，不要讓前端去猜。

以上問(wèn)題都是設(shè)計(jì)師經(jīng)常遇到的一部分問(wèn)題，并不是全部，下邊說(shuō)說(shuō)前端這邊的。

1，用輔助線說(shuō)話而不是自己猜測(cè)

很多前端自詡像素眼，一眼就知道某個(gè)模塊的邊距是多少，字體有多大。這個(gè)一般問(wèn)題不大，但有些時(shí)候差一兩個(gè)像素你不一定看的出來(lái)。凡是涉及到尺寸問(wèn)題，一律輔助線。

2，css3圓角還是切圖圓角？css3投影還是切圖投影？

在遇到這種糾結(jié)的時(shí)候，請(qǐng)聯(lián)系設(shè)計(jì)師以及產(chǎn)品經(jīng)理，講明兩種方式的優(yōu)劣，這個(gè)問(wèn)題可延展到其它類似css3實(shí)現(xiàn)效果的問(wèn)題。

3，各種寬度寫死，各種切大圖啪啪啪

前者會(huì)導(dǎo)致，只要編輯或者數(shù)據(jù)與設(shè)計(jì)圖中的不一樣，你的頁(yè)面效果就完全“不一樣”了，做頁(yè)面重構(gòu)怎么算優(yōu)秀?最大程度的模塊化、最大程度的模塊可移植性、最大程度的自適應(yīng)性、各種極限情況的考慮。也就是你考慮的情況越多，自適應(yīng)性越強(qiáng)，你的代碼越健壯。

后者會(huì)導(dǎo)致啥?后臺(tái)或者編輯拿著刀子捅你…

4，字體問(wèn)題

假如一段需要后期編輯或者拿數(shù)據(jù)的文字內(nèi)容，設(shè)計(jì)圖里是一個(gè)特殊字體，例如：“方正蘭亭西黑”，你自己電腦上也有，然后你直接在css樣式里用了這個(gè)字體… 會(huì)有啥結(jié)果不用多說(shuō)了。遇到這種情況最重要的是需要跟設(shè)計(jì)商議，替換成安全字體，例如：微軟雅黑、宋體、黑體、Arial等，假如設(shè)計(jì)死活不同意，講道理!再不同意，叫上產(chǎn)品經(jīng)理一起講這個(gè)問(wèn)題。

同樣，以上問(wèn)題也只是眾多問(wèn)題中的一小部分，以后想到的話也會(huì)逐漸補(bǔ)充進(jìn)去。解決各種問(wèn)題最好的辦法是：多溝通。