一、前言
我們在編寫網頁時，往往需要兼顧網頁在不同屏寬情況下的顯示
而有時為了省事，沒時間寫新的頁面，也為了兼容考慮，這就需要使用等比壓縮了
等比壓縮的核心是rem
二、正文
（一）、rem的使用
rem是css3中新增加的一個單位屬性(font size of the root element)
相對長度單位。相對於根元素(即html元素)font-size計算值的倍數
rem的在桌面瀏覽器上的初始值是16px（即1rem = 16px）
<!-- rem的初始賦值 -->
<html style="">
<head></head>
<body>
<div style="font-size: 1rem">此處的1rem即設備的默認字體大小，桌面瀏覽器默認字體大小是16px</div>
</body>
</html>
<html style="font-size: 12px">
<head></head>
<body>
<div style="font-size: 1rem">此處的1rem即12px</div>
</body>
</html>
當然還可以在css上進行初始賦值，或者使用js進行動態的初始賦值
/*使用css進行rem的初始賦值*/ html{ font-size: 14px; /*此處的初始賦值表示1rem=14px*/
}
（二）、rem的 62.5% 和 10px的區別
在桌面瀏覽器上 font-size 的默認值是16px;
可知 font-size: 62.5%; 即表示10px （通過計算 16 * 62.5% = 10 得到）
那么 font-size: 62.5%; 和 font-size: 10px; 的區別在什么地方呢？
比較好的解釋：
桌面瀏覽器默認頁面字體大小是16px，這種情況下設置成具體像素大小或者對應的百分比，看起來的效果是一樣的；
但是其他類型的設備的默認字體大小不一定是16px，
特別是高分辨率的設備，16px大小的字體在它們上面看起來會非常小，所以不能在body上設置具體像素值，
設置成百分比，可以按照設備的基准字體大小給編寫的網頁設置好最適合用戶瀏覽的字體大小。
《響應式Web設計實踐》書中原文：最重要的不是屏幕實際的像素大小，屏幕上文字的可讀性才是最重要的。
原文地址https://segmentfault.com/q/1010000002411895
（三）、正確的rem使用方法
如上文所述：
使用 font-size: 62.5%; 更好
/*rem的初始賦值*/ html{ font-size: 62.5%; /*此處的初始賦值表示1rem=10px*/
}
然而坑無處不在。。。
新的問題： 我們開發常用的chrome瀏覽器，支持的最小字體大小是12px，
/*rem在不同瀏覽器下的結果*/ html{ font-size:62.5%;
} header{ height:8rem; /*在其他瀏覽器表示80px，在chrome上表示96px*/
}
解決辦法：
font-size:625%;
1rem = 100px， 以此為單位進行換算，可以避免以上問題的出現
（四）、em 和 rem的區別
rem是相對於根節點的font-size計算
em是相對於父節點的font-size計算
<html> <head> <style> html{ font-size: 625% } .child{ height: 1rem; width: 1rem;
} </style> </head> <body> <!-- rem是相對於根節點的font-size計算 --> <div class="child">此處的1rem = 100px</div>
<!-- em是相對於父節點的font-size計算 --> <div style="font-size:10px;"><!-- 父元素的字體大小是10px--> <div style="height:1em;width:1em;"></div><!-- 所以子元素的em是1em=10px；--> </div> </body> </html>
（五）、<meta name="viewport">的含義
<!-- html頭部一般會加這么一行代碼 -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
</head>
</html>
那么，它有什么作用呢？？
viewport用於設置移動端自適應——
但如果是瀏覽流動布局的網頁那情況會非常糟糕，設想一個寬 度為30%的側邊欄對於320px手機屏幕而言也就96px，只能容納8個12px的漢字，可閱讀性非常差。
為了讓手機也能獲得良好的網頁瀏覽體驗，Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標簽①，它的作用就是創建一個虛擬的窗口(viewport)，而且這個虛擬窗口的分辨率接近於桌面顯示器
| width | 設置layout viewport 的寬度，為一個正整數，或字符串"width-device" |
| initial-scale | 設置頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，為一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
//根據屏幕計算設計rem的標准中
var documentWidth = document.documentElement.offsetWidth;
if(documentWidth > 1268 ){
document.documentElement.style.fontSize = documentWidth/166 + "px";
}
使用上面的代碼，即可根據屏幕寬度等比壓縮網頁
但有2個前提：
1. css代碼涉及大小的，統一使用rem進行設置；
2. html頭部不能使用：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
同理：當不需要等比壓縮頁面時，記得把這行代碼加上去，否則等比壓縮一直存在。。。