PC端

(function () {

function setRootFontSize() {

let rem, rootWidth;

let rootHtml = document.documentElement;

//限制展現頁面的最小寬度

rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;

// 19.2 = 設計圖尺寸寬 / 100( 設計圖的rem = 100 )

rem = rootWidth / 19.2;

// 動態寫入樣式

rootHtml.style.fontSize = `${rem}px`;

}

setRootFontSize();

window.addEventListener("resize", setRootFontSize, false);

})();

移動端

(function () {

function setRootFontSize() {

let dpr, rem, scale, rootWidth;

let rootHtml = document.documentElement;

dpr = window.devicePixelRatio || 1; //移動端必須設置

//限制展現頁面的最小寬度

rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;

rem = rootWidth * dpr / 19.2; // 19.2 = 設計圖尺寸寬1920 / 100(設計圖的rem = 100)

scale = 1 / dpr;

// 設置viewport，進行縮放，達到高清效果 (移動端添加)

let vp = document.querySelector('meta[name="viewport"]');

vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 動態寫入樣式

rootHtml.style.fontSize = `${rem}px`;

}

setRootFontSize();

window.addEventListener("resize", setRootFontSize, false);

window.addEventListener("orientationchange", setRootFontSize, false); //移動端

})();

移動端也可以通用使用：font-size:3rem

總結

以上是生活随笔為你收集整理的动态设置html字号,动态设置html的font-size值 （适配文字大小）的全部內容，希望文章能夠幫你解決所遇到的問題。

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