自適應設計中巧妙解決高度調整難題
在響應式設計中，高度調整常常引發界面錯位問題。尤其當設計稿尺寸（例如1920×1080像素）與瀏覽器實際可視高度不符時，如何保持界面布局完整性至關重要。
例如，使用rem單位進行布局時，設定的body字體大小為100px，一個div高度為1rem，預期高度為100px。但瀏覽器頂部工具欄會占用部分高度，導致實際可視高度小于設計稿高度，最終出現錯位。
以下提供一種改進方案。現有自適應代碼主要通過調整body的font-size來實現，代碼如下：
export const selfAdapter = () => { //頁面初始化，針對屏幕不是1920*1080的頁面尺寸 let designSize = 1920; // 設計圖尺寸 let html = document.documentElement; let wW = html.clientWidth; // 窗口寬度 let rem = (wW * 100) / designSize; document.documentElement.style.fontSize = rem + "px"; const resize = () => { let designSize = 1920; // 設計圖尺寸 let html = document.documentElement; let wW = html.clientWidth; // 窗口寬度 let rem = (wW * 100) / designSize; document.documentElement.style.fontSize = rem + "px"; }; window.addEventListener("resize", resize, false); };
該代碼僅基于窗口寬度計算rem值，忽略了高度變化的影響。 改進的關鍵在于，將計算rem值的依據調整為窗口高度或可視高度。 通過監測窗口高度變化，動態調整rem值，從而更精確地匹配實際可視區域高度，避免界面錯位。 可以考慮使用window.innerHeight獲取瀏覽器窗口的可視高度，并將其用于rem值的計算。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
