解決手機自帶瀏覽器上，用rem單位，內容超出螢幕寬度問題！（rem計算不準）
阿新 • • 發佈：2018-12-23
問題描述：
在H5手機頁面上，用rem單位佈局，配合js計算出一個根節點的font-size（原理是螢幕寬度乘以一個固定比例，如1/100），之後頁面中所有的px全都換算成了rem單位來寫，優點是能適配各種不同螢幕尺寸的手機，不需要寫媒體查詢！例如：設計稿是750px，用js計算出來的根節點font-size是100px（證明此時螢幕寬度是750px），那最外層的容器寬度就寫成7.5rem（計算成畫素也是750），正常情況下是內容寬度就會和螢幕寬度一樣。然而某款華為手機、自帶的瀏覽器下，最外層的容器寬度就會比螢幕寬度要寬，橫向竟然可以滾動！！！經過各種除錯，找出了問題的根本，華為自帶瀏覽器上rem單位計算不準！
解決方案：
一、專案還沒開始做 用到rem佈局就會出現這種問題，所以開始佈局的時候寬度不要用rem佈局，首先考慮百分比佈局，然後考慮彈性盒佈局，避免這種情況出現二、專案進入測試
這樣的話，考慮上一步解決可行度，不行的話考慮以下：
1、計算出最外層容器（或者某個寬度自己試試）是否大於螢幕寬度。2、如果大於、計算誤差的比例。3、直接重置根節點的font-size！