网页版简历制作经验分享
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 。这到底是怎么算的呢？研究了一番之后发现这是按72 ppi （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多租个 虚拟主机 。
成功换工作以后
当你在新公司完成一个有价值的项目时，请及时更新你的简历。为何？因为此时你对项目的记忆最深，要是等到想再跳槽的时候再更新简历，往往在那时候忘记了项目的许多细节。
最后
附上我新版简历的截图（图大，移动网络慎开；请允许我对敏感内容打马赛克）。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
