转自：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多租个虚拟主机。

成功换工作以后

当你在新公司完成一个有价值的项目时，请及时更新你的简历。为何？因为此时你对项目的记忆最深，要是等到想再跳槽的时候再更新简历，往往在那时候忘记了项目的许多细节。

最后

附上我新版简历的截图（图大，移动网络慎开；请允许我对敏感内容打马赛克）。

出处：点我