rem的自适应
關于字體大小的自適應，最近用的很火的就是rem。自從認識了rem,我也用的很起勁，可是在項目實踐中，也踩過了一些坑，整理如下，最終發現有一個相對而言比較完美的解決方案。
1、什么是rem？
rem是一種長度單位，任何能定義XXpx的地方，都能定義為XXrem。和px固定大小不同，rem是 相對于根元素<html>的相對單位，簡單說明下：
?PS:瞧見沒，p標簽里面的文字大小是相對于根元素html的而不是相對于其父元素div的。
?
2、rem響應式方案1：通過JS檢測屏幕大小自動改變根元素html字體大小的值
既然所有標簽都是相對于html的，那就可以通過JS檢測屏幕大小而自動改變根元素html字體大小的值呀，這樣不就實現了字體大小的響應式嗎~~
JS如下：
(function(doc, win) { //根據屏幕尺寸自動調整根元素字體大小 var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //監聽屏幕變化recalc = function() {var clientWidth = docEl.clientWidth;if (!clientWidth) {return;}docEl.style.fontSize = 10 * (clientWidth / 320) + 'px'; //以320寬，10px為基準 };if (!doc.addEventListener) {return;}win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);這段JS的關鍵語句就是：`docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';其中clientWidth在iPhone5或5S下是320px,iPhone6下是375px,iPhone6P下是414px等等...在前期的項目中，我一直都是這個JS控制的，但是發現木有，頁面寬度越來越大，根元素也會越來越大，木有上限，當超過了某個臨界值時，頁面展示就會越來越不好看了，show如下：
其實到這，就差不多兼容手機的各種大小屏幕了，但是屏幕在大點（比如各種pad屏幕）就不是那么好看了...繼續
so,有木有更好的解決方案呢？那肯定有啦...
2、rem響應式方案2：通過css3 media媒體查詢，在一定的屏幕尺寸范圍內，給根元素設定一個值。
CSS如下：
?
@media only screen and (max-width: 375px) {html{font-size: 10px;} /*手機小屏幕*/ } @media only screen and (min-width: 376px) and (max-width: 480px) {html{font-size: 12px;} /*手機中屏幕*/ } @media only screen and (min-width: 481px) and (max-width: 540px) {html{font-size: 14px;}/*手機大屏幕*/ } @media only screen and (min-width: 541px) and (max-width: 768px){html{font-size: 16px;}/*手機大屏幕*/ } @media only screen and (min-width: 769px) and (max-width: 920px){html{font-size: 18px;}/*pad屏幕*/ } @media only screen and (min-width: 921px){html{font-size: 20px;}/*PC屏幕*/ }?
PS:上面的CSS中對于各種屏幕尺寸范圍及相應的字體大小，可根據項目自己的喜好及項目實際自行編輯設定。
3、總結一下
上面兩種方案究其原因都是根據屏幕的大小對根元素字體大小設值，各有弊端：
?
JS動態設置弊端
?
-
需要額外加載解析，有時加載緩慢的話，會在頁面打開時，頁面上字體會很大，排版錯亂，然后加載完后，一下子就好了...造成不好的用戶感知;
-
字體沒有上限，會造成越來越大的窘境（當然，也可以寫個更復雜的方程控制下，但是基于其第1個弊端，我還是舍棄他了）
?
CSS媒體查詢設置弊端：
?
隨著屏幕縮小或拉大，在屏幕尺寸臨界值，會突然出現卡頓的現象，但是考慮到用戶實際使用過程中，不會那么無聊去故意拉動屏幕，特別是在手機端，用戶無法隨意改變屏幕尺寸大小，所有這個小小的弊端完全可以忽略不計。所以，所以，個人還是覺得，這方案最好啦！
?
轉載于:https://www.cnblogs.com/mh66661/p/5842844.html
總結
