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]是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图: