px、em和rem的区别

px

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

特点：

IE无法调整那些使用px作为单位的字体大小国外的大部分网站能够调整的原因在于其使用了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设计稿均分为几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其根元素的字号大小设置相应的大小。