JS计算rem根字体，配合flex布局实现网页自适应（兼容99%）

最新推荐文章于 2025-05-29 19:48:58 发布

无情小寒

最新推荐文章于 2025-05-29 19:48:58 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：填坑 javascrit组件文章标签： css css3 javascript

本文链接：https://blog.csdn.net/zhwangchao/article/details/107786631

填坑同时被 2 个专栏收录

5 篇文章

订阅专栏

javascrit组件

2 篇文章

订阅专栏

本文介绍了一种基于flex和rem的移动端自适应布局方案，通过动态调整根字体大小实现跨平台和跨设备的兼容性，包括具体的计算公式和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发移动端中，需要自搭架构，这时候就需要兼容处理

兼容方案我一般移动端方案直接采用flex+rem根字体大小进行动态布局，这样能够初始做到最大程度（99%）兼容各种机型及平台。

rem换算的原理

网页根字体 = 100 X (屏幕当前宽度 / 设计稿的宽度) 每一个等分为0.5px,便于计算乘100

document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 750) + 'px';

如果觉得每个都要除100觉得麻烦，也可以使用scss 进行配合使用

scss 动态计算函数公式

// 宽度计算
@mixin WITD($n){
	width: ($n / 100)+rem; // 假设设计稿带入的宽度为750  计算后的值为7.5rem
}
// 高度计算
@mixin HIGT($n){
	height:($n / 100)+rem; // 假设设计稿带入的高度为750  计算后的值为7.5rem
}

scss的使用方法

.class{
    @include WITD(750);
}

完整处理方案

利用浏览器window对象的resize事件进行处理，每次改变窗口的大小进行计算根字体

1、闭包处理

// 闭包动态计算rem的写法
(function (doc, win, undefined) {
  var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
	recalc = function () {
	  var clientWidth = docEl.clientWidth;
	  if (clientWidth === undefined) return;
	  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';  
	};
  if (doc.addEventListener === undefined) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

2、公用函数方式处理

// 非闭包的写法
function countREM(){
	document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 750) + 'px';  
}
doc.addEventListener('DOMContentLoaded', countREM, false)
window.addEventListener('resize', countREM)