移动端系列讲解之字体单位

1. 移动端字体单位有哪些？
2. 他们的兼容性如何？
3. 他们的特点？

 

 

1.移动端字体单位现在主要有 em 、rem 、px

2.兼容性请传送点击这里

 

 

em:

1. em是相对长度单位。相对于父元素设置的字体大小。
2. em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
3. em的值并不是固定的。
4. em会继承父级元素的字体大小。例如 父元素div 的字体设置为16px 那么div中的字元素p标签或者其他标签的1em 就相当于16px。

所以我们在写CSS的时候，需要注意以下几点：

1. body选择器中声明Font-size=62.5%；(为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*62.5%=10px,1.2em则=12px，这是不是就简单多了，准确多了呢~~)
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem:

1. rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
2. 这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
3. 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
4. 在这里为大家提供一个px,em,rem单位转换工具传送门

px:

1. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
2. IE无法调整那些使用px作为单位的字体大小；
3. Firefox能够调整px和em，rem，但是多数的中国网民使用IE浏览器(或内核)。

 

 

总结：

1. 在移动端你可以根据你的项目来决定使用px em 或者rem（前提是你知道他们的特点）
2. 如果使用rem的话那么改版更加容易只需要修改跟元素的字体大小整个dom树上的元素的字体大小都会改变
3. 不建议使用em 因为em 会继承父亲元素的字体，不熟练的人会造成字体大小失控的问题
4. 不管是用em rem 还是px 都不会跟随手机浏览器大小的改变而改变都需要进行额外的操作（比如 media 或者js计算跟元素大小《适用于rem》）