記一次rem踩坑之旅

背景

前幾天，幾個手機端和電腦端頁面須要開發，手機端頁面爲了更好的適配，固然就用了rem單位。
設計稿是750px的，就直接經過想着設計稿上的元素是多少像素，css就跟着是多少的rem就行了，簡單的換算了下，三行代碼就來了

html {
    font-size: calc(100vw / 750);
}

當時也沒有想太多，反正以爲如今手機瀏覽器兼容性通常都不錯，就果斷的用了。可次日，同事說再他瀏覽器上大了好多，我想多是vw單位有兼容性問題，css不能作的，果斷的換了js來實現，小case，代碼來了

var w = window.innerWidth;
document.documentElement.style.fontSize = w / 750 + 'px';

想着完事大吉了，可曾想，好戲在後頭

這過程當中，測試也沒有怎麼測試，今天代碼上到線上，才告訴我說安卓機有問題。開始我有點不信，直到我看到了真相，不得不信了。

看到的眼前的界面，首先應該定位問題，纔好解決問題。

定位問題

看了半天看不出什麼問題，因而決定抽絲剝繭，剔除其餘代碼，就留一張圖片，不斷的改變大小，沒以爲有什麼問題。
忽然想到，把瀏覽器的寬度，根元素的字體大小，以及圖片的實際大小給打印出來看看。這下好了，根元素字體大小是0.5px，沒啥問題，瀏覽器寬度是375，關鍵是圖片大小爲750px，我可設置的750rem呀，不是應該是375px嗎？不帶這樣的。好吧，我錯了，原來是由於這個瀏覽器根元素的字體大小不能小於1px。

解決問題

問題就這樣陰差陽錯的找到了，這還沒完，得解決問題。

方案一

開始想着要不用js來測試根元素是否是不能小於1px，而後決定對頁面進行總體伸縮。
可在我印象中，這樣會形成頁面模糊掉，因而果斷放棄。

方案二

既然不能小於1px，那我大於應該是能夠了吧，大多少才合適呢，值也不可以隨便設置，否則之後還得邊切圖邊拿個計算器在旁邊算，想一想畫面很美觀。固然可使用一些工具來自動的處理，得去找來配置，但如今不想去折騰那些了，先解決燃眉之急吧。我開始想放大100倍，總感受不太妥，因而放大了10倍，這樣375寬的屏幕不就是5px了嗎，5 > 1，這樣總行了吧，相應的代碼中的rem值得縮小10倍，不就完美解決了嗎。

固然只是解決了基準，如今下一步得把代碼中的值給替換掉。怎麼作呢？

• 手動？不現實吧。。。
• 使用編輯器正則替換？正則可不能作加減乘除這種運算了

• 只能寫個腳原本作了，很簡單

  1. 讀取文件
  2. 使用正則找到rem前面的數值，除以10，給出正則\d+(\.\d+)?
  3. 替換完成了，固然是寫回去了哦

噹噹噹，大功告成，完美收官！！！

等等，別急---

pc端問題

因爲不是響應式的，pc端和手機端不是同一個頁面，測試反饋pc端的頁面在谷歌上顯示不正常。
這還了得，IE不正常還情有可原，奈何谷歌也不正常，這不是存心跟我做對嗎。
一看代碼，原來同事也使用了rem單位。
關鍵是，個人瀏覽器上顯示正常呀，可測試的電腦上的就是有問題。我吐槽了一句，你那是什麼年代的瀏覽器呀。一看版本，75。。。
那尼(ÒωÓױ)！，我錯怪你了

來，繼續祭出個人屠龍刀，打開開發者工具，不停的調整字體大小。
根元素字體大小計算出來是2點幾，沒毛病，關鍵是我放大還好，只要縮小到必定的程度，頁面元素就不跟着一塊兒伸縮了。
好吧，我想起來了，谷歌有個最小字體限制的，高版本把這個限制去了，因此個人看起來正常。

小記一筆，與君共勉

好了，終於完了，睡覺😪~~~