关于CSS中的单位px、em、rem

首先，px、em、rem都是相对单位；

px（pixel像素）是相对于显示器屏幕分辨率的，IE无法调整那些使用px作为单位的字体大小；

em是相对于当前对象内文本字体的尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册），不过需要注意的是em单位会继承父级元素的字体大小；

而rem是CSS3新增的一个相对长度单位（root em，根em）；那么这个单位与em有什么区别与联系呢？rem和em单位一样，都是一个相对单位,不同的是em是相对于父元素的font-size进行计算,而rem是相对于根元素html的font-size来进行计算的 , 这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。目前除了IE8及其更早版本的浏览器其他的都已支持rem；

任意浏览器的默认字体高都是16px；所有未经调整的浏览器都符合: 1em=16px，那么12px=0.75em,10px=0.625em；为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样1em=10px, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在用em作为单位时，需要注意三点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值，避免字体大小的重复声明；

关于第三点，也就是避免1.2 * 1.2= 1.44的现象；比如说你在#div1中声明了字体大小为1.2em，那么在声明#div1的子元素#div2的字体大小时就只能是1em，而不是1.2em；若是1.2em，它会因继承了#div1的字体高而变为了1.2*1.2=1.44相对长度；所以em的值其实并不是固定的，它会继承父级元素的字体大小；

默认情况下浏览器给的字体大小是16px，所以按照转化关系 16px = 1rem；使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果；一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size；给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系；

下面贴上Aaron大神在慕课上讲圣诞节的时候讲到的代码，实现监听浏览器更改html的font-size；ps：非Ctrl c+v , 良心手打~嘤嘤

　　var docEle=document.documentElement;

　　//当用户翻转设备（即设备横向持或纵向持，方向发生改变时）此事件被触发；

　　//在绑定resizeEvt事件时，注意当浏览器不支持orienrationchange事件时我们绑定resize事件；总之就是监听当窗口发生变化时就需要重新设置根字体的值；

　　resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize' ,

　　reCal=function(){

　　　　// ①

　　　　docEle.style.fontSize=20*(docEle.clientWidth/320)+'px';

　　}

　　绑定浏览器缩放与加载事件

　　windows.addEventListener(resizeEvt , reCal , false);

　　windows.addEventListener(DOMContentLoaded , reCal , false);

注意docEle.style.fontSize=20*(docEle.clientWidth/320)+'px'这个公式不是一定的，需要根据不同情况定义，具体的可参见：http://www.data321.com/fe659370；

使用rem作为单位的话，比如在浏览器默认情况html内字体大小为16px时，一个需要显示字体大小为14px的div 可以直接设置样式为font-size：.875rem就可以了；

巴特西

关于CSS中的单位px、em、rem

最新文章

热门文章