px : Pixel像素单位。像素是相对显示器分辨率而言。em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px)。rem : 相对单位,可理解为 "root em" ,相对于根节点html的字体大小来计算,css3新加属性。如果没有重置,html默认font-size:16px。也就是说,em是以自身父容器为参考对象的,而rem直接以HTML为参考对象的,所以rem更适合移动式开发。em : em是一个相对长度单位,是相当于当前对象内文本的字体尺寸,如果我们未设置当前文本的字体尺寸,那么em就会相当于浏览器的默认字体尺寸。 在浏览器中默认字体尺寸为16px,换句话说1em = 16pxrem : 除了rem是相对于根节点html,其他和em一样。rem适配移动端原理: var offWidth = window.screen.width / 25; document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; 这样一来,25rem 等于 移动设备的最大宽度
来源:https://www.cnblogs.com/cl94/p/11333797.html