CSS3字体大小rem属性用法

PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。

只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的px字体大小设置。

这种方法存在一个问题：当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。

这样对于那些关心自己网站用户可读性、用户体验的前端人员来说，就是一个大问题了。

因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位

em（font-size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

使用是“px”会在浏览器中放大或缩放浏览页面时页面布局会被打破，要解决这个问题，我们可以使用“em”单位。

在使用“em”作单位时，一定需要知道其父元素的字体大小设置，因为“em”就是一个相对值，而且是一个相对于父元素的字体大小值（缩放比率/缩放因子），其真正的计算公式是：

例子：父元素为16px，子元素设置为1.4em 则子元素实际字体大小16px * 1.4=22.4px。

因此 “1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，至于确定值是多少，必须知道其父元素的值！

用rem单位

rem（font-size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，

从上面的介绍可知，px单位的的设置会影响子元素/子孙元素的字体大小显示，而em单位的设置也是根据父元素的字体来确定的。这时候父元素的字体大小设置就显得很关键了！

rem是相对于页面根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值即可，其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放，字体大小值标准参考图：

我们来看一个简单的代码实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算：1.2rem即 12px ，1.6rem即16px 。如果没有设置，将是以浏览器默认的“16px”为基准）。

rem属性浏览器兼容性

rem是CSS3新引进来的一个度量单位，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。

例如要设置手机浏览器显示，父元素字体像素为6px，那就设置

html {font-size: 37.5%;/*6 ÷ 16 × 100% = 37.5%*/}
body {font-size: 1.4rem;/*1.4 × 6px = 8.4px */}
h1 { font-size: 2.4rem;/*2.4 × 6px = 14.4px*/}

参考：

http://www.phpvar.com/archives/2752.html

https://cloud.tencent.com/developer/information/%E7%A7%BB%E5%8A%A8%E7%AB%AFrem%E9%80%82%E9%85%8D

https://zhidao.baidu.com/question/553998626685304812.html

https://www.cnblogs.com/wxcbg/p/5908967.html