我们都知道移动端可能离不开字体设置,rem和em是我们最长用的。
rem的设置是基于根来设置的,其大小变化也需要用JS设置。因为有多重设置方法,所以代码就不贴出来了。
以前看网上文章对em有些不太清晰了解,所以整一篇简单的出来。
一句话来说:
#####em是基于其本身字体缩放的。
例子(元素本身有font-size值,父元素没有):1
2
3
4
5
6
7.demo {
border:1px solid #333;
}
.demo .mark {
font-size:10px;
padding:1em;
}
此时其元素本身的padding值为10px;
如果元素本身没有设置font-size值,由于font-size是可以继承的,故其em的值便是根据父元素的font-size的值来定的。
例子(元素本身没有font-size值,父元素有):1
2
3
4
5
6
7.demo {
font-size:12px;
border:2px solid #ccc;
}
.demo .mark {
padding:1em;
}
此时其本身的padding值便是12px;
例子(元素、父元素都有font-size值):1
2
3
4
5
6
7
8.demo {
font-size:12px;
border:2px solid #ccc;
}
.demo .mark {
font-size:14px;
padding:1em;
}