轉自：Heero.Luo
2012年中，因為換工作面試的需要，我得更新舊的簡歷。但是在Word中排版實在是各種不順手，於是就發揮了作為前端工程師的優勢把簡歷做成了網頁；2014年末想換工作時又對其進行了改版。這份簡歷曾經受到好幾位HR和獵頭的好評，所以特地分享制作經驗，也算是給想換工作的同行參考。
進入正題之前，先想想HTML簡歷的好處：
- 無須下載，直接打開。
- 可以采用更豐富的設計和更靈活的排版。
- 可以通過超鏈接訪問其他資源。
- 可以順帶展示自己設計以及前端方面的技能。
而在此基礎上，我還給這份簡歷定下了以下目標：
- 在一個頁面中展示所有內容。
- Write once, run anywhere. 兼容PC設備與移動設備，最好還能直接打印。
- 簡單實用，最好連JS都不用寫。那些用上了各種動畫做出來的甚至是做成了小游戲的炫酷簡歷，其實並不利於閱讀。
好了，下面具體講講如何打造這樣一份簡歷。
設計
很多程序員會喊：“我是寫代碼的，不懂設計。”但俗話說得好：沒吃過豬肉，總見過豬跑吧。平時逛這么多網站，難道沒有幾個特別順眼的？現在瀏覽器的開發工具非常先進，看上哪個直接扒過來“參考”就行。像簡歷這種簡單頁面也不需要先做PSD稿，構思好之后直接寫HTML和CSS更為方便。
設計時應盡量使用圖形、圖像表達內容，這是因為相比大段的文字，人更喜歡看圖。這里也貼一下我簡歷中其中一節改版前后的對比（左舊右新）：
相比左側大段密密麻麻的文字，右側的柱狀圖讓人一眼就能看清技能水平。
字體大小
這年頭顯示器越來越大，相對地文字就越來越小，現在大部分網站都把標准文字大小設為14px。考慮到簡歷的內容不多，排版可以寬松一些，因此建議把標准文字大小設為16px，這在屏幕尺寸較小的移動設備上看起來也不會那么吃力。
關於兼容
簡歷的受眾是誰？無非是兩類人：HR以及技術工程師。可以確定的是，技術工程師基本上是用Chrome或者Firefox的好同志，並且非常鄙視IE。HR常年耳濡目染，也會逐漸地換上新的瀏覽器。然而，考慮到那小部分的HR以及極小部分的技術工程師的感受，還是准備一段“溫馨”的提示吧：
實現方法很簡單，通過條件注釋對IE 9.0以下版本的瀏覽器，直接用iframe套個提示頁面去把原頁面擋住：
<!--[if lt IE 9]>
<script>
!function(body) {
body.style.width = body.style.height = '100%';
body.parentNode.style.overflow = body.style.overflow = 'hidden';
}(document.body);
</script>
<iframe src="4oie.html" frameborder="0" scrolling="no" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999;"></iframe>
<![endif]—>為什么連IE8也要拋棄呢？這是因為它不支持Media query以及一些CSS 3樣式，而這恰好是后面說到的多設備適配所必須要用到的技術。
加密聯系方式
這一步主要是為了避免被各種騷擾電話、垃圾郵件的掃號軟件掃到，這里說的加密並不需要做得很復雜，只要稍微加一點干擾因素即可。比如你的QQ號是1234567，那么在網頁上可以這樣輸出：
<p>QQ：<script>document.write( 'a1b2c3d4e5f6g7h'.replace(/\D/g, '') );</script></p>至於郵件地址則可以這樣（以 abc@126.com 為例）：
<p>Email: <script>document.write( ['com', '126', 'abc'].reverse().join('.').replace('.', '@') );</script></p>電話號碼是比較敏感的信息，可以搞復雜點，這里我采用的是base64方案。可能很多朋友還不知道，稍微先進點的瀏覽器都已經原生支持base64的編碼和解碼了，分別是調用window.btoa和window.atob兩個函數。所以電話號碼可以這樣輸出（以 13800138000 為例）：
<p>Phone number: <script>if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); }</script></p>再者，我並不想任何人都能看到我的電話號碼，所以還可以加點限制。比如URL帶有某個參數才顯示電話號碼：
<p id="phone-number" style="display: none;">Phone number: <script> if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); } if ( /[?&]show-phone-number(&|$)/.test(window.location.search) ) { document.getElementById('phone-number').style.display = ''; } </script></p>適配PC與移動設備
首先，通過Media query在不同的寬度下采用不同的布局。
其次，市場上Retina屏幕的設備（如大部分iPad、部分Macbook、大部分手機）越來越多，像圖片這些非矢量內容在這些屏幕上會因為被拉大而失真。所以，在准備內容圖片的時候，最好是做成實際顯示尺寸的兩倍，再通過CSS縮小。而對於裝飾性質的小圖標，可以用兩倍大小的圖片（通過background-size縮小），也可以用字體圖標。這里我不建議用SVG，因為它的性能比較差，在移動設備上打開會明顯地卡了一下。
最后，不要忘了貼上個二維碼，方便移動設備掃碼訪問。
做好這一步，就可以帶着iPad去面試了。
打印
其實打印機也是一種設備，按理說這部分內容應該跟上一節放一起的，但是打印設備的情況比較特殊，而且有不少坑，所以就單獨作為一節。
打印設備特殊在哪呢？A4紙的尺寸是寬21cm、高29.7cm，但是我用Chrome把頁面存成PDF（在打印的界面可以存）之后，看到的分辨率是寬595px、高842px。這到底是怎么算的呢？研究了一番之后發現這是按72ppi（Pixels Per Inch，即一英寸所含的像素數）換算的：
1in = 2.54cm
21cm / 2.54cm * 72px ≈ 595px
按照Media query的規則，這個寬度在打印的時候明顯是進入了手機設備的布局。而16px大小的文字打印出來之后的大小就是：
2.54cm * 16px / 72px ≈ 0.56cm
這文字明顯太大了，所以得縮：
@media print { body { font-size: 12px; } }可這縮了之后，內容相對變小，再用原來小寬度的布局就不合適了，反而是大寬度的布局更好，於是就有了這樣的代碼：
@media not print and (max-width: 639px) { /* ... */ }然后坑來了，這里的Media query表達的並非“不是打印設備並且寬度不超過639px”，而是“不是寬度不超過639px的打印設備”。（關於這一點可以看看Mozilla的解釋說明）
這個小問題難不倒我們，把代碼改成嵌套的Media query：
@media not print { @media (max-width: 639px) { /* ... */ } }本來以為問題已經解決，但是用微信掃一掃后發現樣式異常。原來手機QQ瀏覽器的內核還不支持嵌套的Media query，順帶查了一下，IE系列全部瀏覽器也不支持這項特性。
被折騰地沒辦法了，最后乖乖地寫了兩個CSS：
<link href="css/style.css" media="not print" rel="stylesheet" type="text/css" /> <link href="css/style-for-print.css" media="print" rel="stylesheet" type="text/css" />接下來再研究一下打印的樣式要怎么寫。首先是 @page ，可以用來修改頁面容器的版式，最常用的是指定頁面的尺寸及邊距：
@page { size: A4 portrait; margin: 2.1cm 1.9cm; }其次，某些瀏覽器默認是不打印背景色和背景圖片的，這樣一來背景小圖標就沒了。對於Chrome，可以加上這段CSS代碼強制打印背景：
body { -webkit-print-color-adjust: exact; }再次，要處理鏈接。要知道打印出來之后，用手指往紙上戳是戳不開網頁的。所以諸如“在線地址”、“個人博客”這樣的文字鏈接要么隱藏，要么把鏈接地址也打印出來。要顯示鏈接地址可以這么寫：
a:after { content: '[' attr(href) ']'; }此外，紙質簡歷的篇幅不宜過長，可以選擇性地隱藏一些內容。比如黑白打印的簡歷可以忽略圖片：
最后，大家還要記住一個前提，以上這些都是不兼容IE 6、IE 7、IE 8的，但是落后的打印店可能用的還是XP系統，所以輸出個PDF去打印是比較保險的。
簡歷做完以后
先用各種瀏覽器看一下有沒有露餡，不過更重要的是：請閱讀你的簡歷至少10遍。程序員的表達能力普遍不強，在這個過程中，你可以發現：
- 各種錯別字。比如把“登錄”寫成了“登陸”。
- 各種錯誤術語。比如把“jQuery”寫成了“JQuery”，把“iOS”寫成了“IOS”。
- 各種語句不通。
- 各種表達累贅。
至於放置簡歷的服務器，可以用Github pages，也可以每年花￥100多租個虛擬主機。
成功換工作以后
當你在新公司完成一個有價值的項目時，請及時更新你的簡歷。為何？因為此時你對項目的記憶最深，要是等到想再跳槽的時候再更新簡歷，往往在那時候忘記了項目的許多細節。
最后
附上我新版簡歷的截圖（圖大，移動網絡慎開；請允許我對敏感內容打馬賽克）。
出處：點我