rem

rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

//rem与px 的不同方法实现1：100
1.使用%单位方便使用
css中的body中先全局声明font-size=625%，这里的%的算法和rem一样。
因为100%=16px，1px=6.25%，所以100px=625%，
这是的1rem=100px，所以1.2rem=120px。px与rem的转换通过100就可以得来
2.使用px单位方便使用
注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；
html{font-size: 100px;}
body{font-family:"微软雅黑";font-size: 16px;}　 //必须
//如果不写 body{fonr-size:16px}
//bug：HTML里使用rem单位【html{font-size：100px；}】造成高度撑开，垂直不能顶对齐，像添加了margin-top的值；
//因为html的字体为100px,所有的默认字体就都为100px，要容下100px的字体当然就要这么高的行高。所以其实a的字体的确是22px,line-height也是22px，问题就出现了div上；
3.使用vw 视窗宽度 单位方便使用
//首先了解设计稿宽度 与  逻辑像素 [UI设计稿物理像素与逻辑像素](https://www.jianshu.com/p/85b7afece910)/
如果设计图的宽度是640px 或者 750px     dpr = 2 （2倍图）
如果设计图的宽度是1080px               dpr = 3  
所以：逻辑像素 = 750px /2 = 375px
所以：375px = 100vw
所以：1vw = 3.75px
所以：26.67vw = 100px = 1rem

例子：//声明
//百分比                                     
	 /*16px * 62.5% = 10px;*/    
	 /*16px * 625% = 100px;*/     
	 html{font-size:62.5%;} 
//px 
	 html{font-size: 100px;}
	 body{font-size: 16px;}　 //必须
//vw
	如果设计图宽度为750px
	则：根元素字体大小设置为
	htmt：{font-size:26.67vw}
//一般情况下，是这样子使用的
div{font-size:0.5rem}    ======>>>>>>显示为font-size:50px
...

优点
//用一个东西肯定要知道它的好处啦，由于其他字体大小都是基于html的，所以在移动端做适配的时候，可以使用不同的方法
1.媒体查询
 @media only screen and (min-width: 320px){
  html {
   font-size: 62.5% !important;
  }
 }
 @media only screen and (min-width: 640px){
   html {
     font-size: 125% !important;
 }
}
 @media only screen and (min-width: 750px){
   html {
    font-size: 150% !important;
  }
 }
 @media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
 }
2.监听视口 变化
 function resetWidth() {
    // 兼容ie浏览器 document.body.clientWidth
    var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (baseWidth > 750) baseWidth = 750;
    document.documentElement.style.fontSize = baseWidth / 750 * 100 + 'px'
 }
 resetWidth();
 window.addEventListener('resize', function () {
    resetWidth();
 });
这样子就能做到仅仅改变html的字体大小，让其他字体具有“响应式”啦

。