// 移动端设置rem字体
var setRemFont = function(baseSize, uiSize) {
baseSize = baseSize || 24; // 1rem等于多少px,用来设置转换比例
uiSize = uiSize || 750; // 设计稿的大小
var htmlEle = document.documentElement; // html标签
var reCalc = function() {
var winWidth = htmlEle.clientWidth;
winWidth = winWidth < 375 ? 375 : (winWidth > 640 ? 640 : winWidth);
htmlEle.style.fontSize = baseSize * winWidth / uiSize + 'px';
}
if (document.addEventListener) {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; // 屏幕旋转或窗口大小变化事件
window.addEventListener(resizeEvt, reCalc, false);
document.addEventListener('DOMContentLoaded', reCalc, false);
}
}
// setRemFont();
const setRemFontWithEs6 = (baseSize = 24, uiSize = 750) => {
const htmlEle = document.documentElement;
const reCalc = () => {
let winWidth = htmlEle.clientWidth;
winWidth = winWidth < 375 ? 375 : (winWidth > 640 ? 640 : winWidth);
htmlEle.style.fontSize = baseSize * winWidth / uiSize + 'px';
}
if(window.addEventListener) {
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvt, reCalc, false);
document.addEventListener('DOMContentLoaded', reCalc, false);
}
}
// setRemFontWithEs6();
h5移动端设置rem字体
最新推荐文章于 2024-08-21 10:02:24 发布