px、em和rem的区别

px

像素，相对长度单位，是相对于显示器屏幕分辨率而言的。

特点：

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

em

相对长度单位，相对于自身元素的字号大小，若自身没有设置，就参照父容器的字号大小或浏览器默认字号大小

各浏览器默认最小字体：

chrome	Safari	Opera	Firefox	搜狗	IE	Edge	360	qq	UC	水狐	星愿
6px	0	12px	0	12px	0	0	12px	12px	12px	0	12px

例如：自身{ font-size: 14px; },宽度为{ width: 10em; }，即宽度px为140px

rem

CSS3新增的一个相对单位（root em，根em），相对于HTML根标签的字号大小。

使用场景：为适应不同的浏览器、移动端的宽度，此时选择rem最为合适（移动端可以选择rpx）

使用方法：将UI设计稿均分为几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其根元素的字号大小设置相应的大小。