em的用法

我们都知道移动端可能离不开字体设置，rem和em是我们最长用的。

rem的设置是基于根来设置的，其大小变化也需要用JS设置。因为有多重设置方法，所以代码就不贴出来了。
以前看网上文章对em有些不太清晰了解，所以整一篇简单的出来。
一句话来说：

#####em是基于其本身字体缩放的。

例子（元素本身有font-size值，父元素没有）：

.demo {
    border:1px solid #333;
}
.demo .mark {
    font-size:10px;
    padding:1em;
}

此时其元素本身的padding值为10px;

---

如果元素本身没有设置font-size值，由于font-size是可以继承的，故其em的值便是根据父元素的font-size的值来定的。
例子（元素本身没有font-size值，父元素有）：

.demo {
    font-size:12px;
    border:2px solid #ccc;
}
.demo .mark {
    padding:1em;
}

此时其本身的padding值便是12px;

---

例子（元素、父元素都有font-size值）：

.demo {
    font-size:12px;
    border:2px solid #ccc;
}
.demo .mark {
    font-size:14px;
    padding:1em;
}

此时其本身的padding的值为14px,而不是12px;

---