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

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

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

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

一、px

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

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

二、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解决了这个问题

三、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;}
}

四、%

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

通常来讲,1 em = 16 px = 100%

我的总结：在通常的PC端网页制做过程当中，px和em用的比较多，在移动端通常采用rem。

总结的很差请见谅！