在現(xiàn)代 Web 開發(fā)中，為了實現(xiàn)移動端的響應式布局，通常會使用 rem 單位來定義樣式尺寸。本文將通過一段代碼解析其功能實現(xiàn)原理，并通過一個案例展示如何在實際項目中應用這段代碼。
這段代碼的功能是根據(jù)設備屏幕的寬度動態(tài)計算并設置根元素 html 的 font-size，從而讓使用 rem 單位的樣式根據(jù)屏幕寬度自動縮放。動態(tài)適配設計稿以 750px 寬的設計稿為基礎計算出比例關系，將屏幕寬度映射到設計稿尺寸。響應式調整監(jiān)聽窗口尺寸變化如橫豎屏切換并實時調整。支持主流瀏覽器通過事件監(jiān)聽兼容現(xiàn)代瀏覽器。
其中監(jiān)聽事件resize 事件當窗口尺寸調整時觸發(fā)。orientationchange 事件當設備屏幕方向改變橫屏豎屏切換時觸發(fā)。DOMContentLoaded 事件在 DOM 樹加載完成時立即計算一次初始值。然后使用 document.documentElement.clientWidth 獲取當前視口寬度。按比例計算字體大小 font-size = 100 * (clientWidth / 750)。將計算結果應用到 html 元素的 style.fontSize。
使用時先引入該js，然后在寫長度單位時候替換成rem即可
上一篇： 純前端如何判斷是否含有違禁詞？
