HLS播放器RTSP播放器支持8K播放且低延时高并发全功能流媒体播放器EasyPlayer搭建之HTML中 px，em，rem该如何区别？

EasyPlayer是一款流媒体播放器系列项目，支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、 支持本地文件播放，支持本地抓拍、本地录像、播放旋转、多屏播放、倍数播放等多种功能特性，核心基于ffmpeg，稳定、高效、可靠、可控。

随着多年不断的发展和迭代，不断基于成功的实践经验，发展出包括有： EasyPlayer-RTSP、EasyPlayer-RTMP、EasyPlayerPro 和EasyPlayer.js 等播放器。目前支持Windows、 Android、iOS三个平台，同时EasyPlayer.js还支持Linux平台。

本篇博文我们来讨论以下平台搭建中HTML的px，em，rem该如何区别的问题。

HTML中 px，em，rem该如何区别

PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

特点：

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em是相对长度单位。

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是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作为单位就行了。

特点 ：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

rem

rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化。