「rem」是指根元素（rootelement，html）的字体大小，好开心的是，从遥远的IE6到版本帝Chrome他们都约好了，根元素默认的font-size都是16px。这样一个新的单位兼容性如何呢？
IE9+，Firefox、Chrome、Safari、Opera的主流版本都支持了，我可以放肆的使用rem了。
em的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以rem的出现解救了我这样不会算术的人，再也不用担心父级元素的font-size了，因为它始终是基于根元素（html）的。
比如默认的htmlfont-size=16px，那么我想设置12px的文字就是：12÷16=0.75（rem）
当然，你可以引入CSS预处理工具（Sass、LESS、Stylus等）自动计算rem值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入CSS预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下html的默认font-size=10px不就好计算了嘛！Likethis：
html{font-size:62.5%;/*10÷16=62.5%*/}body{font-size:12px;font-size:1.2rem;/*12÷10=1.2*/}p{font-size:14px;font-size:1.4rem;}需要注意的是，为了兼容不支持rem的浏览器，我们需要在rem前面写上对应的px值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的font-size:100%，还是设置为font-size:62.5%，如果你引入了CSS预处理工具那么自然可以使用默认值，如果由于其他原因使用font-size:62.5%也无可厚非，完全可以在body中重置回你需要的默认font-size。
－－－－－－－－－
css字体大小自适应样式设置篇
字体可以设置大小使用cssfont-size来实现，有时需要对字体大小根据浏览器分辨率来判断后自适应大小。
在CSS2.0中字体大小自适应是难实现的，一般使用JS来实现，这里就不必说了。
现在字体大小自适应样式常常使用在IE10、谷歌浏览器、较新手机、平板平台上（安卓、ios），可以使用CSS3.0来实现。但是依然是使用font-size字体大小样式来设置，只不过值在CSS3版本中新增了自适应百分比大小值。
“viewpoint”=windowsize
15vw=15%设置width（可以理解为宽度单位）15vh=15%设置height（可以理解高度单位）
Whentheheightorwidthoftheviewportischanged,theyarescaledaccordingly.
像这样的问题，我之前也遇到过，比如以下代码：（小插曲，可跳过）
box的宽度设置为900px，wrap设置为100%(~~这个百分比是相对于viewport的)；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并不是100%，这个问题大家可以去思考下。
回到上面的问题，font-size:4vw，应该会使得字体的大小变化，可是他没有，和标准说的不一样，所以可以认为是一个bug。
window.onresize=function(){varbox=document.getElementById("box");box.style["z-index"]=1;//显式的触发repaint}z-index可以对应的元素被重绘（repaint）。
延伸一点点关于重绘（repaint）和回流（reflow）的知识：
1.添加、删除元素(回流+重绘)2.隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)3.移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)4.对style的操作(对不同的属性操作，影响不一样)5.还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)让我们看看下面的代码是如何影响回流和重绘的:vars=document.body.style;s.padding="2px";//回流+重绘s.border="1pxsolidred";//再一次回流+重绘s.color="blue";//再一次重绘s.backgroundColor="#ccc";//再一次重绘s.fontSize="14px";//再一次回流+重绘//添加node，再一次回流+重绘关于重绘和回流
1.cssexpression，这个效率比较低，不推荐使用
#box{star:expression(onresize=function(){varres=parseInt(this.style.width)/20;res=res<9:"9px"res+"px";this.style.fontSize=res;});}//P.S:上面代码没测试，不知道写错没有
与其说用的css，还不如说是JS，而且是效率不够的JS。
2.mediaquery，这东西也不是特别好用
3.mediaquery+-webkit-transition实现平滑转变
这玩意儿其实也没太大作用，用JS处理相当简单，不知道大家还有没有其他比较好的方案，可以提出来交流下~
-----------------------------------------------------------------
4.rem+js
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”rootem”,相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
页面基准320px(20px),htmlfont-size值的计算：
注：需设置meta缩放比1:1
vw：viewpointwidth，视窗宽度，1vw等于视窗宽度的1%。vh：viewpointheight，视窗高度，1vh等于视窗高度的1%。vmin：vw和vh中较小的那个。vmax：vw和vh中较大的那个。
其它的单位还有：%:百分比in:寸cm:厘米mm:毫米pt:point，大约1/72寸
pc:pica，大约6pt，1/6寸
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/iossafari/androidbrowser4.4+等均需属性加么有前缀)
ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,iossafari7.1+,androidbrowser4.4+支持)