js rem 適配多端
阿新 • • 發佈:2021-07-02
js計算適口設定合適的根結點字型大小適配螢幕
<script type="text/javascript">//JS監聽瀏覽器文字大小程式碼 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
當通過js修改根結點字型大小後,會出現一個從預設大小到修改後的字型大小過渡過程
在head里加入以下程式碼可以去除過渡
(function(doc, win) { setRem(); var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { setRem(); }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); // doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); function setRem() { var docEl = document.documentElement; var clientWidth = docEl.clientWidth; if (!clientWidth) { return; } docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px'; }