CSS中常用的字体单位：px、em、rem和%的区别

在刚接触CSS时，px用的比较多，也很好理解，可是用久了就会发现有些缺陷，特别是在做响应式开发的时候。

那这么多单位到底在什么时候用什么单位合适呢？今天就来探讨一下。

先大致解释一下这些单位的意思：

1、px

px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。

像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

2、em

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多；

em单位有如下特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

我们在写CSS的时候如果要用em为单位，需要注意以下几点：

　　1. body选择器中声明Font-size=62.5%;

　　2. 将你的原来的px数值除以10，然后换上em作为单位;

　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

我们知道任意浏览器的默认字体高都是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作为单位就行了。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题

3、rem

rem是CSS3新增的一个相对长度单位，只相对根目录即HTML元素

所以我们只要在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照

html{font-size:62.5%; /* 10÷16=62.5% */}

body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}

p{font-size:14px;font-size:1.4rem;}

兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。

在配合响应式网页中建议根据媒体查询来改变font-size的大小

html{font-size:20px;} /*chorme下设置为10px无效，推荐设置为20px，1rem=20px*/
@media screen and (max-width:768px){ /*手机屏幕*/
html{font-size: 15px;}
}
@media screen and (min-width: 768px) and (max-width:992px){ /*平板屏幕*/
html{font-size: 20px;}
}
@media screen and (min-width: 992px){ /*电脑屏幕*/
html{font-size: 25px;}
}

4、%

百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

一般来说,1 em = 16 px = 100%

个人总结：在一般的PC端网页制作过程中，px和em用的比较多，在移动端一般采用rem。

总结的不好请见谅！