- 移动端字体单位有哪些?
- 他们的兼容性如何?
- 他们的特色?
1.移动端字体单位如今主要有 em 、rem 、pxgit
2.兼容性请传送点击这里github
em:
- em是相对长度单位。相对于父元素设置的字体大小。
- em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
- em的值并非固定的。
- em会继承父级元素的字体大小。例如 父元素div 的字体设置为16px 那么div中的字元素p标签或者其余标签的1em 就至关于16px。
因此咱们在写CSS的时候,须要注意如下几点:浏览器
- 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,这是否是就简单多了,准确多了呢~~)
- 将你的原来的px数值除以10,而后换上em做为单位;
- 从新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。好比说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 由于此em非彼em,它因继承#content的字体高而变为了1em=12px。
rem:
- rem是CSS3新增的一个相对单位(root em,根em),这个单位引发了普遍关注。
- 这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
- 这个单位可谓集相对大小和绝对大小的优势于一身,经过它既能够作到只修改根元素就成比例地调整全部字体大小,又能够避免字体大小逐层复合的连锁反应。
- 在这里为你们提供一个px,em,rem单位转换工具传送门
px:
- px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
- IE没法调整那些使用px做为单位的字体大小;
- Firefox可以调整px和em,rem,可是多数的中国网民使用IE浏览器(或内核)。
总结:
- 在移动端你能够根据你的项目来决定使用px em 或者rem(前提是你知道他们的特色)
- 若是使用rem的话那么改版更加容易只须要修改跟元素的字体大小整个dom树上的元素的字体大小都会改变
- 不建议使用em 由于em 会继承父亲元素的字体,不熟练的人会形成字体大小失控的问题
- 不论是用em rem 仍是px 都不会跟随手机浏览器大小的改变而改变都须要进行额外的操做(好比 media 或者js计算跟元素大小《适用于rem》)