移動端rem佈局導致頁面載入瞬間無樣式
今天做專案遇到一個問題之前一直都沒有遇到過，查了很多資料，最後也解決了，記下來，防止以後面試官問：開發過程中有沒有遇到什麼問題啊，尷尬的說不出來。。。
一直移動端都是用的rem進行佈局，今天遇到的問題是，字型使用rem頁面載入瞬間css不生效，時間不是特別長，但是能非常清晰的看到。
正常的樣式應該是這樣：
頁面載入瞬間會這樣：
這就很尷尬，肉眼一下就能看出來，嚇得我趕緊找bug，首先高度的問題是由於設定的是line-height，我用padding-top和padding-bottom代替竟然神奇的解決的，接下來是字型大小問題，我的字型是給的rem,斷點發現走到這兒
就出現了問題，我想了很久，也沒想出來毛病，百度了一下，最後這樣解決：
1. 用原生程式碼代替jQuery
原先：jQ寫法（不利於載入，不過jquery.min.js體積也不算太大）
後來換成了原生 ，原生寫法（優化載入，可以加快body的顯示）
並將這段計算字型的js放在了body之前，就這樣我的問題就被神奇的解決了，就是這麼尷尬，還準備用剩下的方法，，，為了更好的理解，我試了之後的做法。
2.對body進行預先隱藏處理
a:先給body加上樣式display：none；
b:之前的js方法後面加上計時器，並將這段計算字型的js放在了body之後
，使之計算好font-size之後再對body進行顯示（ 請將100毫秒改成1（100是為了方便測試），而1毫秒是可以忽略不計的）
此種方法有缺點是none直接移除，後來使用了和display：none類似的visibility：hidden;
<body id="body" style="visibility:hidden;">
document.getElementById("body").style.visibility="visible"//js裡面改成這樣區別在於display：none，設定隱藏後，body元素從頁面中被移除，會出現些小問題（之後的js遍歷問題，swiper失效問題），而visibility只是將元素隱藏，保留了其原本的位置，風險較小。
bug消除參考=>[http://geek.csdn.net/news/detail/113801]
也看了一下對rem總結的文章=>[https://segmentfault.com/a/1190000003690140 ]感悟挺深，前端知識更新太快，需要不斷學習才可以。