'use strict'; /** * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px; * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体; */ const win = window; const _baseFontSize = 150; const _fontscale = 1; const doc = win.document; const ua = navigator.userAgent; const matches = ua.match(/Android[Ss]+AppleWebkit/(d{3})/i); const UCversion = ua.match(/U3/((d+|.){5,})/i); const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80; const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi); let dpr = win.devicePixelRatio || 1; if (!isIos && !(matches && matches[1] > 534) && !isUCHd) { // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1; dpr = 1; } const scale = 1 / dpr; let metaEl = doc.querySelector('meta[name="viewport"]'); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); doc.head.appendChild(metaEl); } metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale +',maximum-scale=' + scale + ',minimum-scale=' + scale); doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;
在html插入这段代码,然后在样式文件使用base字体为75px的基准转换px到rem即可。必要时还可以通过vh,vw调整。
https://www.jianshu.com/p/e96ccb603a50