在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。
单位
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而 rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,,在根元素中设置多大的字体,这完全可以根据您自己的需求来定
![0df22a1c2d502050c8796cab9d1b87eb.png](https://i-blog.csdnimg.cn/blog_migrate/3aa9fca7d8a49c92bd9d5404b34f7949.jpeg)
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对与元素的父元素的font-size进行计算的;rem是相对于根元素html的font-size进行计算的。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能
我在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
![10612fbb26f9b6a5e41153b1b8e2ab34.png](https://i-blog.csdnimg.cn/blog_migrate/985cdc7b23de02816671a641b55e9250.png)
![98cb637ae5b15873b5bd3c15f3bc703b.png](https://i-blog.csdnimg.cn/blog_migrate/b0eadac7188c855c954bf2c18fb02b5d.jpeg)