前言
在之前寫了一篇關于rem適配的文章，但是沒有給出具體的封裝，那么今天這里給出常用的三種方法，分享出來供大家參考學習，下面話不多說了，來隨著小編一起學習學習吧
一、rem1.js
第一種方法考慮了m端屏幕旋轉的問題.對兼容性做出了一定的處理,具體看代碼.
export function rem (doc, win) { let docEl = doc.documentElement; //考慮以及兼容了 屏幕旋轉的事件 let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; let recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); // 屏幕大小以及旋轉變化自適應 doc.addEventListener('DOMContentLoaded', recalc, false); // 頁面初次打開自適應 recalc();};二、rem2.js
采用html標簽的offsetWidth長度計算,
export function rem() { var fz = document.querySelector('html').offsetWidth / 7.5; //設計圖 750 1rem=100px document.querySelector('html').style.fontSize = fz <= 100 ? fz + 'px' : '100px'; window.onresize = function() { rem(); };};三、rem3.js
采用window.innerWidth計算,設置了body fontSize防止字體繼承,使頁面字體過大.
export function rem() { document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px document.body.style.fontSize = '14px';// 在body上將字體還原大小，避免頁面無樣式字體超大}總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
