web實際開發過程中,特別是移動端的頁面，會遇到元素尺寸及字型在不同解析度裝置上表現差異較大，甚至嚴重影響使用者體驗；

我現在的做法是使用rem作為尺寸單位，來實現頁面內元素尺寸及字型在不同寬度裝置下自由縮放尺寸，從而解決小螢幕上顯示牛大字的尷尬情況；

1. 設定html的字型為100px;

2.頁面內需要用到尺寸的地方都使用rem作為尺寸單位；（這樣在改變html字型大小的時候頁面內的其他元素也都會隨之按比率發生變化；

ps: 如圖上這樣設定尺寸，然後當html的font-size變為50px的時候，那頁面中設定的所有rem單位的尺寸都隨之減少到一半；

3.那麼問題來了，怎麼才能讓HTML的font-size發生變化呢？

兩個辦法：a. 使用css媒體查詢，當頁面寬度為某個條件時改變html的font-size;

b. 使用JS判斷頁面的寬度，動態調整html的font-size;

這樣就可以實現頁面寬度不同，但是看起來比例、效果還是一樣的。