###px： 绝对单位，页面按精确像素展示。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

px特点

  1. IE无法调整那些使用px作为单位的字体大小；

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。)

###em： 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 ###rem： 相对单位，可理解为“root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。相对于当前对象内文本的字体尺寸。

###注意：

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

其它的单位还有： %:百分比 in:寸 cm:厘米 mm:毫米 pt:point，大约1/72寸 pc:pica，大约6pt，1/6寸

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀) ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

今天第一次写移动端代码，在调屏幕适配的问题时，使用rem时，字体并没有自适应（原因是没有设置根字体大小,而且需要使用媒体查询不同屏幕来确定不同的根字体大小）。所以最后采用vw作单位。由于图片width:100%,所以图片会自动缩放，如果需要使用map（map使用像素为单位），则只能使用js动态计算。

关于移动端使用rem来自适应字体可以看：《web app 变革之rem》

该文章推荐的文章:

《用rem来做响应式开发》

px转rem工具：《px转rem工具》

###相关补充

各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在XP下显示宋体，而英文版肯定不是。所以有必要统一默认的字体样式： 结论： utf-8编码： font:12px/1.5 Arial,sans-serif; ———————————- gbk编码： font:12px/1.5 Arial;

理由：

#####字号：12px（font:12px/1.5 Arial;）

1、12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但应用环境还不成熟。宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的默认字体大小。

2、在Chrome3.0之后的中文版中，字体最小值是12px，即使设置为10px，最后也变成12px。

#####行高：1.5（font:12px/1.5 Arial;）

1、这是一个经验值，不同的产品对line-height要求不同，但一般会根据经验设置最常用的为默认值。

2、对于中文来说，常用的字体大小12px、14px、16px、18px等偶数，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

3、在IE6和IE7中，行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线。

4、设置line-height时，推荐使用不带单位的纯数字，当使用单位后浏览器会把line-height定位绝对值，而不会随着字体大小的变化而变化，无单位的数值表示是所在容器的字号的倍数，所以理论上设置为无单位的纯数字是最佳选择。

#####字体：airal（font:12px/1.5 Arial;）

1、 微软和苹果系统都预装了这款字体，应用广泛。

2、 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，所以，在gbk的编码下，会去掉sans-serif，不给IE8搞破坏的机会。

3、 Web中，中文字体的选择有限，目前所有的主流浏览器都默认设置宋体。

4、 使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高解决绝大部分情况，但是都不会很完美。