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 的
