移動端 H5 分屏頁面適配問題

單位問題

肯定用rem, 為了方便計算，一般取 1rem=100px（設計稿px）, 需要根據設計稿的寬度設置合適的fontSize, 具體可以看這篇文章 ：移動端根據設計稿寬度適配 px轉換相對單位rem

屏幕適配問題

現在的設備寬高五花八門，按照rem 計算總是會出問題，因為設備的寬高比例是不同的，而設計稿的寬高是不變的，如果按照設計稿的尺寸來做，那么必須要求設備的寬高比例和設計稿是相同的，否則就會重疊或者間距過大。針對這個問題可以做一下適配，以下代碼可以保證不會發生重疊：

(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;var clientHeight = docEl.clientHeight;if (clientWidth>=640) {clientWidth = 640;};if (!clientWidth) return;// 1rem=100px(設計稿px) 設計稿寬度1080var fontSize = 100 * (clientWidth / 1080); var picRate = 0.5625; // 設計稿的寬高比例var expectHeight = clientWidth / picRate;if(clientHeight < expectHeight){var heightDiff = expectHeight - clientHeight;var heightDiffRate = heightDiff / clientHeight;fontSize = fontSize * (1 - heightDiffRate);}docEl.style.fontSize = fontSize + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

總結

以上是生活随笔為你收集整理的移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。