rem的使用方法：
首先，先說一個常識，瀏覽器的默認字體高都是16px。步入正題-----〉
- 兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算對不支持的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
- 使用%單位方便使用
css中的body中先全局聲明font-size=62.5%，這里的%的算法和rem一樣。
因為100%=16px，1px=6.25%，所以10px=62.5%，
這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來，很方便了吧！
- 使用方法
注意，rem是只相對於根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可；
例子：
1 /*16px * 312.5% = 50px;*/
2 html{font-size: 312.5%;}
1 /*50px * 0.5 = 25px;*/
2 body{
3 font-size: 0.5rem;
4 font-size\0:25px;
5 }
一般情況下，是這樣子使用的
1 html{font-size:62.5%;}
2 body{font-size:12px;font-size:1.2rem ;}
3 p{font-size:14px;font-size:1.4rem;}
- 優點
用一個東西肯定要知道它的好處啦，由於其他字體大小都是基於html的，所以在移動端做適配的時候，可以使用這樣的方法
1 @media only screen and (min-width: 320px){
2 html {
3 font-size: 62.5% !important;
4 }
5 }
6 @media only screen and (min-width: 640px){
7 html {
8 font-size: 125% !important;
9 }
10 }
11 @media only screen and (min-width: 750px){
12 html {
13 font-size: 150% !important;
14 }
15 }
16 @media only screen and (min-width: 1242px){
17 html {
18 font-size: 187.5% !important;
19 }
20 }
（增加js處理部分，供參考，待理解）
基本思路就是：利用rem單位，就是相對於跟（html）字體的大小，來計算相應元素的寬高
- 一般將html的font-size設置為：20px或30px或50px或100px
- 還有利用瀏覽器默認自己大小(16px)也就是16px*62.5%=10px，這樣就是html{font-size:62.5%;}，而不是html{font-size:10px;}因為瀏覽器（PC）最小就是12px。這樣一來1rem = 10px；
我們來簡單的看一下：
<div id="wrap"> <div id="div1">我是一個div標簽</div> </div> CSS設置樣式
#wrap{ font-size: 20px;} #div1{ font-size: 1em; width: 16em; height: 2em; background-color: lawngreen; } 效果如下：
這里說一下為啥不用em，因為em是相對於父級字體大小的，這樣一層套一層比較麻煩，還有就是當我想改變其中一個div的字體大小時，整個布局就亂套了
還有一個問題就是當我們的瀏覽器窗口發生大小變化時，原來的布局是不是也應該完美的顯示呢。這里我們就利用js來根據瀏覽器可視區(clientWidth)來重新給html設置響應的字體大小
/* 這里我們利用了一個自執行函數 */ (function(){ change(); function change(){ /* 這里的html字體大小利用了一個簡單書序公式（十字相乘），當我們默認設置以屏幕320px位基准此時的字體大小為20px(320 20px),那么瀏覽器窗口大小改變的時候新的html的fontSize（clientWidth 新的值）就是clientWidth*20/320 */ document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px'; } /* 監聽窗口大小發生改變時 */ window.addEventListener('resize',change,false);})(); 注意：一般情況下我們利用rem單位來設置元素的寬高就行，沒必要頁面中的所有元素都用rem來弄（當然了這個也得看具體需求了）
作者：datura_lj
鏈接：https://www.jianshu.com/p/65f80d4b44bb
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
這樣子就能做到僅僅改變html的字體大小，讓其他字體具有“響應式”啦。