專業頁面構建工程師的核心競爭力，不在於「像素級還原 PSD」，而在於審圖——通過分析設計稿，理解設計師意圖，結合交互狀態，做出有取有捨的技術決策，真正還原設計神韻。

案例一：行高與間距的取捨——形式服務於結構

設計稿： 話題列表行高 19px，項目間距 4px，標題與描述無間距。
規範衝突： 文本規範行高 18px。
溝通決策： 標題與描述行高改 18px（符合規範）；但項目間 4px 下邊距堅持保留——它構建了段落視覺節奏，若併入 18px 行高，列表將失去層次感。
原則： 有取有捨，方是領悟。

小插曲：Tag 標簽——精致勝過復用

設計稿：11px 細明體彩色圓角 Tag。
團隊提議：改用 12px 宋體文本 + CSS3 圓角，利於運營後期修改文案。
決策：堅持切圖。文本渲染無法達到設計稿的字體質感與視覺精致度，Tag 作為點綴強調元素，精致度優於內容靈活性。未來改文案成本可接受，視覺品質損失不可逆。

案例二：麻煩的 CSS 換來完美對齊——視覺體驗優於代碼優雅

設計意圖： 頭像與名稱頂端對齊，等級圖標與群名底部對齊。圖標 16×16px 高於文字。
簡單寫法失敗： 垂直居中/基線對齊均無法在各瀏覽器達到雙對齊。
複雜寫法成功： 以頭像為錨點，名稱絕對定位 top:0；等級圖標絕對定位 bottom:0；容器 relative 定位。代碼稍繁，但跨瀏覽器像素級完美對齊。
結論： 視覺還原度是第一產出物，代碼優雅為其服務。

案例三：負 Margin 擴大點擊區——細節提升體驗

痛點： 30px 方形頭像旁，用戶名僅能顯示 2-3 漢字，難以識別身份。
常規結構無法突破： 固定寬度容器限制文本區域。
巧解： 給名稱容器定寬，用 margin-left: -10px 向左位移覆蓋部分頭像區域，不改 HTML 結構，僅改 CSS，顯示字符從 2-3 個增至 4 個，識別度質變。

給初級構建工程師的忠告

• 不要聽到「對像素」就機械截圖對比——設計稿本身可能有誤差，盲目對齊反而破壞整體感。
• 靜態頁面與設計稿相差幾像素卻「感覺不一樣」，陷入「改-截-對-改」死循環，不如靜心審圖、充分溝通、有取有捨、聰明判斷。
• 數據裝載後，細節問題會放大；前期投入審圖溝通，後期能省去無數打補丁時間。

審圖，是用代碼語言重寫設計語言的翻譯過程。優秀的翻譯，從來不是逐字對譯，而是傳神。