rem单位的使用总结

在这周做一个基于移动端的页面中用到了单位rem，因此在这里总结自己在使用中的一些新的体会，有不准确之处还望指正。

谈到单位rem不得不先来谈一谈px和em这两个经典的单位。

px

像素，可以说是最经典的文本计量单位了，相信大家在刚刚接触前端技术时大部分时候使用的都是它，它就相当于对文本或元素设定了比较固定和精确的大小值，使用它更方便于我们精确的设定每一个元素的大小，无需经过额外的换算，到手即用，很符合“所见即所得”这一概念。

*需要注意的是，如果某一个元素没有设定px那么它会默认从父元素处继承px的大小*

随着移动设备的发展和进步，web技术开始大幅度向移动端迁移，在考虑到移动端与pc端有种种不同的情况以及当谢越来越注重用户个性化体验的前提下，px在移动端上的应用明显不能满足人们的需要，于是乎也就出现了根据父级决定大小的单位——em。

em

em，继承父级的需要神级脑力计算才能准确使用的大小单位（笑），当然这是一个夸张的说法，我们知道，在前端拿到设计稿时，如果设计稿的内容要求比较完备，那么就会出现精确的元素大小要求，比如某个元素必须是XXpx，然而如果这个大小是要求适配移动端，那么显然这个大小还要隐性的要求按照页面大小改变而变化，那就要使用不可避免的需要使用到em了

说到这里问题就来了，如果某个浏览器的默认html的排序为12,那么在他的第一子元素body很容易就知道字体大小是12px了,到这里，如果我们按照设计师要求，对于某个元素设定字体大小为18px，为了适配移动端使元素内的文字大小根据页面大小而变化，我们对元素设定的大小就是1.5em,嗯，到这里我们不就立刻觉得“这不是很简单嘛，难点和亮点在哪”，我只想说，“少年你还太天真了”（手动滑稽）+自动滑稽

假设我们不仅仅有一个div嵌套呢，在实际开发过程中，设计一个大型网站，可以想象以下其代码量是很庞大的，如果我们总是需要计算子元素相与父元素的文本大小关系，耗费脑力不说，还很容易出错，比如刚才的例子，在子元素为18px，后，我们要在它内部再嵌套多个子元素，第一个为22px,第二个为14px,同时把字体设置为80%，第三个更里层为16px……

Excuse Me? nizaidouwowanme?(歪果仁学中文音)，我的Math是体育老师教的，你别吓我啊

rem

全名root em，基于em的基础上改进的单位，只参照html的px值，不会受到父级元素的影响，假设最初html设置font-size:12px，那么其后所有子元素设置的文字大小都将是12*X,比如1.5rem就是12*1.5=18px,但他也有一个历史性的缺点，

由于它是CSS3的新增设置，所以并不兼容低版本浏览器如IE8-等
在这里还需要强调一个关键点，那就是浏览器默认的html的文本大小都不一样，有的是16px,有的是12px，或许还有其他更多的默认大小，所以如果需要使用rem这个通俗易懂暴力的单位那么最好在一开始的时候就对html的font-size进行声明，比如font-size:12px，这样一来可以统一html的默认字体大小，减少出错的概率。

如果说的还不够详细，那么请找找百度爸爸和谷歌妈妈