html5 - 前端如何百分百还原美工图?

Question

我是一个入门的前端，最近遇到个困惑。就是做出来的也页面老是被批跟美工图有差距，为什么我照着美工图量的，做出不来和美工图一样的感觉呢？ps我也会，感觉在ps随便改很舒服，为什么html代码就这么难调呢？按美工图尺寸来，看着就是不对。看着对了，尺寸又变了。这是为什么?_?为什么永远量不准的感觉?

Answer 1

前端 為什麼要百分之百還原美工圖？
全世界所有產品都是妥協的結果~
美工要是懂網頁設計還行~不懂真能玩死你~

用成熟的框架~例如Bootsrap
按照你選擇框架組織內容的方式來設計~
這樣實現最快

Answer 2

不知道你是怎麼量的，我簡單說下我的思路吧。

首先美工圖如果是psd，那麼想避免誤差拿到尺寸最好就是用ps（除非有標註…）。 ps建議裝最新的cc2015，對前端切圖相當友善~

裝好以後打開設計稿做預處理：把各個需要獨立切開的組件扔進一個組裡（便於導出），然後裁切一下頁面邊緣（避免有超出設計頁面的東西導致測量誤差，這個我一般習慣用工具列裡的裁切工具，選中後有個設定比例的下拉列表，選擇寬高分辨率，然後直接把設計稿默認寬高填上、分辨率寫72就ok了。範圍怎樣，系統都會幫你把裁切區域裡邊的東西自動轉好），然後就可以開工了。

在每個圖層/分組（就是要獨立匯出的部分）上點右鍵，選擇那個「匯出為...」然後選擇匯出格式（當然也可以在首選項裡設定快速匯出的格式，之後直接用「匯出為xxx」就行了），選完後直接匯出，這時候可能會卡一下，是ps自動在壓縮圖片。 ok之後把原圖拖進設計稿和原始位置重疊住，選擇拖進來那層，按住ctrl，尺寸就出來了！如果不是想要的還可以動滑鼠，ps會切換顯示各種距離尺寸…後邊就不用說了吧？自己寫定位就好。

最後說一句個人不推薦直接複製css，出來的代碼亂七八糟一般沒法直接用，還不如這麼手工量一下記下來就好。另外匯出的東西務必拖進來再量，因為我發現用工具列上的選擇工具的定界框和導出的素材邊緣部分並不一定是一樣的，所以保險起見還是要拖進來量一下避免有誤差… …

手機打的，不得不說sf的手機端體驗真的好渣啊…我在網頁端又重排了下格式，看起來應該不會太累了~

Answer 3

別急，做到高保真還原是可以的，但也不得不說有些所謂UI尺寸可以搞成14.1px 16.3px 這就沒必要了，甚至UI圖本身都是有各種不對齊，PS分組各種亂，然後你就是各種糾結是正常的，很多UI連基本的UI素養都沒有，還不如一個平面美工，

如果上述狀況都不存在可以做好以下工作:
PC端:樣式可以先reset.css,然後效果圖字體多少尺寸就是多少，圖片或邊框要注意哪些是不是要做成響應式的

行動端: 同上，字體單位建議用rem，rem是相對於根元素html做字體設置，不容易受繼承幹擾

總結:不要認為UI圖是一定對的，如果一旦確定是合理的就按上述步驟來沒問題的

Answer 4

psd不是一般有大小嗎？在行動端一般是做了適配的，psd一般給的是640px,最煩的是背景有各種稀稀拉拉的小點點，看到鬥噁心

Answer 5

有問題提前溝通，溝通好了，就朝著百分百還原去做。做的過程中遇到問題，及時和設計溝通。至於如何還原，我想在PC端主要視覺差距是IE瀏覽器相容性惹的禍，如果你在chrome下鬥做不到還原設計稿，建議去溫習基礎。行動端如果要還原，就要考慮到設計稿是參考多大的尺寸來設計的，字體，間距。總之，都有成熟的解決方法。樓上幾個答案，有說不用百分百還原的，那米再前端不會有大的前途，又說用絕對定位的，太片面，不可能滿屏絕對定位，不要誤人子弟。

Answer 6

如果允許頁面出現捲軸，實現還是有可能的，寬高按設計稿的比例計算出來，

如果，既要與設計稿一致，又要整屏顯示，那就是不可能的，除非做設計的，也根據不同的設備設計出不同大小的設計稿來，

說多了都是淚，如果你的上司是做設計的，拿著一張設計稿要前端出一模一樣的頁面，還要整屏顯示，因為設計稿就是沒有滾動條的，這時你就直接拿鍵盤滑鼠砸到他臉上

Answer 7

相容IE8-不？如果不要求6和7的兼容性 有可能做出來

Answer 8

個人感覺是沒必要100%復刻UI出的設計圖，特別是尺寸方面，只要充分理解設計意圖的情況下，做到視覺上的還原即可。

Answer 9

啊哈哈哈~以前我遇到過這麼多的美工,牛氣的很;就是不讓一像素的改圖;好吧,當時我是這麼做的;

整圖摳掉文字當做body的背景;所有節點position:relative定位;

之後...項目過了,然後2個月之後就又改版了;

PS:這廝居然要求字體是13PX;

Answer 10

ps可以產生些 css 。有點用