html定义rem,css3 rem怎么用？

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。

rem是什么？怎么用？

rem(font size of the root element)是CSS3新增的一个相对单位(root em，根em)，一个相对于根元素的字体大小的单位。可用于根据html元素字体大小，来计算子元素有关的尺寸。

看到rem大家一定会想起em单位，em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

优点：在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算。

我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

常用写法：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*/

}

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 )。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器兼容性

IE9以上等支持CSS3的浏览器是肯定可以支持的，如果想要兼容IE低版本，那可以考虑针对IE9以下低版本浏览器，用px来实现。

更多web开发知识，请查阅 HTML中文网 ！！