px

相对屏幕分辨率而言, 相对长度单位

特点:

• 固定的, 不能适应浏览器的缩放, 响应式不适用
• IE 无法调整使用 px 的字体

em

相对于文本的 font-size, 如果没有, 则相对于父元素直至浏览器的 font-size, 相对长度单位, 由浏览器转换为像素值

特点:

• em 的值不是固定的
• em 会继承父级元素的字体大小, 父元素字体大小会影响子元素字体大小
• 1em=元素字体大小
• 转换 px: px=em*相对于使用 em 单位的元素的字体大小
  浏览器默认字体都是 16px, 因此 1em=16px

rem

css3 新增的相对长度单位, 移动开发使用最广泛的, 相对的是 html 跟元素字体大小, 由浏览器转换为像素值

特点:

• 不用时时关注父级元素的情况
• 修改跟元素成比例的修改所有字体大小
• 可以避免字体大小逐层复合的连锁反应
• 1rem=跟元素字体大小
• 转换 px: px=rem*跟元素字体大小

rem 和 em 的相同点

• 控制元素的整体缩放, 而不是固定大小

rem 和 em 的区别

• 浏览器根据谁来转化 px 的