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

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》）