web页面中字体单位

px em rem percent

1、PX单位
即像素为单位，它是web发展初期人们推崇并认可的，因为它非常的精准稳定
问题：人们使用浏览器访问页面时，放大或缩小浏览器页面，像素也会随之变化，很容易打破我们的页面布局，造成页面乱掉的不好体验

2、EM单位
em是一个相对值，是一个相对于父元素的值，其真正的计算公式是：
1 / 父元素的font-size值 * 需要转化的像素值 = em值

3、REM单位
REM是CSS3推出的字体单位
在[W3C]官网上是这样描述[rem]的——“font size of the root element”

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而[rem]是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

image.png