首先從題目來說，為什么不是100%設(shè)計(jì)稿還原？其實(shí)100%是一個理想的狀態(tài)，有很大一部分設(shè)計(jì)師是不懂“頁面重構(gòu)”的，很多時候設(shè)計(jì)師在做設(shè)計(jì)的時候，會著重考慮視覺因素，實(shí)現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計(jì)細(xì)節(jié)，瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計(jì)稿的還原效果，我們能做的就是盡可能的還原設(shè)計(jì)稿，無限接近100%還原，而不是追求100%的還原效果。
首先從題目來說，為什么不是100%設(shè)計(jì)稿還原？其實(shí)100%是一個理想的狀態(tài)，有很大一部分設(shè)計(jì)師是不懂“頁面重構(gòu)”的，很多時候設(shè)計(jì)師在做設(shè)計(jì)的時候，會著重考慮視覺因素，實(shí)現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計(jì)細(xì)節(jié)，瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計(jì)稿的還原效果，我們能做的就是盡可能的還原設(shè)計(jì)稿，無限接近100%還原，而不是追求100%的還原效果?？赡苡行┤藭环揖鸵?00%還原，那么OK，ps中和瀏覽器中相同字體顯示效果不一樣，你怎么辦？難道文字也全切成圖嗎？所以在大部分“頁面重構(gòu)”的時候，最負(fù)責(zé)任的做法是，在考慮易用性、合理性的前提下盡可能的實(shí)現(xiàn)設(shè)計(jì)稿99.9%的還原。
重構(gòu)的工作并不是前端工程師一個人的工作，還要包含與設(shè)計(jì)師、后臺工程師（php等）以及產(chǎn)品之間的溝通，中間很可能會涉及到設(shè)計(jì)圖的修改。
下邊從幾個方面聊聊頁面重構(gòu)中的一些問題：
1，頁面寬度問題
主要內(nèi)容部分，目前主要的分辨率一般都在960以上：960、1000、1200等，這些都屬于正常的尺寸，但也有設(shè)計(jì)師做出類似973、1011等奇葩尺寸… 這個問題我不太好意思拿出來聊，太低級了。當(dāng)然，奇葩的單數(shù)行高、相同元素不同大小等等這都是屬于相似問題。
2，毛邊問題
一個方方正正的按鈕，帶著一圈毛邊。這個問題也是在重構(gòu)中經(jīng)?？吹降氖虑?，雖然這個在寫頁面的時候可以很輕易的避開這個問題，但是不是看著很不爽？看下圖：
正常邊給人的感覺整齊干凈，毛邊顯得邊緣模糊不清，并且容易造成按鈕高度不明確。假如是半透明按鈕需要切圖的時候，還會造成圖片體積變大，所以這個問題應(yīng)當(dāng)避免。
3，圖層模式
有些設(shè)計(jì)圖中，某個元素例如某個按鈕，需要切png半透明圖片，但是這個按鈕居然跟背景圖是正片疊底或者顏色疊加。每當(dāng)我遇到這個問題的時候會有一股想自殺的沖動，所以為了世界和平，這個問題一定要避免。
4，圖層鏈接
頁面重構(gòu)的某些時候需要選擇某些圖層進(jìn)行移動，結(jié)果一動發(fā)現(xiàn)壞了，好多其它的元素跟著刷刷移動，瞬間感覺無力，默默的一個個取消圖層鏈接。不需要的圖層鏈接，能取消就取消吧。
5，某些圖片的尺寸
例如在某些列表中，縮略圖的尺寸，經(jīng)常會遇到119*73等等奇怪的尺寸。其實(shí)這種最好是用整數(shù)：120*80等，對頁面的柵格化、響應(yīng)式以及后臺裁圖存圖等都有很大的好處。
6，圖層命名和文件夾
這個其實(shí)跟題目關(guān)系不大，但這里要提一下。舉個例子：
你喜歡哪個？不用說了吧…
7，奇葩的邊距和填充
同等級的模塊，從視覺及內(nèi)容上都屬于同一類型，但上下邊距一個20px一個27px，左右填充一個10px一個7px，這種問題跟“1.頁面寬度問題”類似，都屬于低等級問題。
8，需要運(yùn)營的文字內(nèi)容使用特殊字體
這個請google一下網(wǎng)絡(luò)安全字體，中文的安全字體少的可憐，放過非設(shè)計(jì)師的頁面使用者吧。
9，不做極限設(shè)計(jì)
假如要設(shè)計(jì)一個按鈕，放在某個比較小的模塊里，那么請考慮一下按鈕包含的字?jǐn)?shù)最長的情況下是怎樣的。再比如一個類似微博名片的東西的簡介，設(shè)計(jì)圖中做了30個字，那么請考慮下100個字的情況。假如需要做截字，請規(guī)定多少字或者幾行字開始截，不要讓前端去猜。
以上問題都是設(shè)計(jì)師經(jīng)常遇到的一部分問題，并不是全部，下邊說說前端這邊的。
1，用輔助線說話而不是自己猜測
很多前端自詡像素眼，一眼就知道某個模塊的邊距是多少，字體有多大。這個一般問題不大，但有些時候差一兩個像素你不一定看的出來。凡是涉及到尺寸問題，一律輔助線。
2，css3圓角還是切圖圓角？css3投影還是切圖投影？
在遇到這種糾結(jié)的時候，請聯(lián)系設(shè)計(jì)師以及產(chǎn)品經(jīng)理，講明兩種方式的優(yōu)劣，這個問題可延展到其它類似css3實(shí)現(xiàn)效果的問題。
3，各種寬度寫死，各種切大圖啪啪啪
前者會導(dǎo)致，只要編輯或者數(shù)據(jù)與設(shè)計(jì)圖中的不一樣，你的頁面效果就完全“不一樣”了，做頁面重構(gòu)怎么算優(yōu)秀？最大程度的模塊化、最大程度的模塊可移植性、最大程度的自適應(yīng)性、各種極限情況的考慮。也就是你考慮的情況越多，自適應(yīng)性越強(qiáng)，你的代碼越健壯。
后者會導(dǎo)致啥？后臺或者編輯拿著刀子捅你…
4，字體問題
假如一段需要后期編輯或者拿數(shù)據(jù)的文字內(nèi)容，設(shè)計(jì)圖里是一個特殊字體，例如：“方正蘭亭西黑”，你自己電腦上也有，然后你直接在css樣式里用了這個字體… 會有啥結(jié)果不用多說了。遇到這種情況最重要的是需要跟設(shè)計(jì)商議，替換成安全字體，例如：微軟雅黑、宋體、黑體、Arial等，假如設(shè)計(jì)死活不同意，講道理！再不同意，叫上產(chǎn)品經(jīng)理一起講這個問題。
同樣，以上問題也只是眾多問題中的一小部分，以后想到的話也會逐漸補(bǔ)充進(jìn)去。解決各種問題最好的辦法是：多溝通。
