在現(xiàn)代 Web 開(kāi)發(fā)中，為了實(shí)現(xiàn)移動(dòng)端的響應(yīng)式布局，通常會(huì)使用 rem 單位來(lái)定義樣式尺寸。本文將通過(guò)一段代碼解析其功能實(shí)現(xiàn)原理，并通過(guò)一個(gè)案例展示如何在實(shí)際項(xiàng)目中應(yīng)用這段代碼。

這段代碼的功能是根據(jù)設(shè)備屏幕的寬度動(dòng)態(tài)計(jì)算并設(shè)置根元素 html 的 font-size，從而讓使用 rem 單位的樣式根據(jù)屏幕寬度自動(dòng)縮放。動(dòng)態(tài)適配設(shè)計(jì)稿以 750px 寬的設(shè)計(jì)稿為基礎(chǔ)計(jì)算出比例關(guān)系，將屏幕寬度映射到設(shè)計(jì)稿尺寸。響應(yīng)式調(diào)整監(jiān)聽(tīng)窗口尺寸變化如橫豎屏切換并實(shí)時(shí)調(diào)整。支持主流瀏覽器通過(guò)事件監(jiān)聽(tīng)兼容現(xiàn)代瀏覽器。

其中監(jiān)聽(tīng)事件resize 事件當(dāng)窗口尺寸調(diào)整時(shí)觸發(fā)。orientationchange 事件當(dāng)設(shè)備屏幕方向改變橫屏豎屏切換時(shí)觸發(fā)。DOMContentLoaded 事件在 DOM 樹(shù)加載完成時(shí)立即計(jì)算一次初始值。然后使用 document.documentElement.clientWidth 獲取當(dāng)前視口寬度。按比例計(jì)算字體大小 font-size = 100 * (clientWidth / 750)。將計(jì)算結(jié)果應(yīng)用到 html 元素的 style.fontSize。

使用時(shí)先引入該js，然后在寫(xiě)長(zhǎng)度單位時(shí)候替換成rem即可