window.addEventListener('resize', setHtmlFontSize) setHtmlFontSize(); function setHtmlFontSize() { // 根据屏幕的宽度来改变根元素的字体大小的值 // 当前屏幕 / 标准的375屏幕 求得你当前屏幕是标准屏幕的多少倍 * 标准屏幕根元素的字体大小 // 当前屏幕的宽度 / 375 * 100 // 假如当前750/375 = 2 * 100 == 200px // 1. 当前屏幕的宽度 var windowWidth = document.documentElement.offsetWidth; // 限制最大屏幕 和最小屏幕 if (windowWidth > 640) { windowWidth = 640; } else if (windowWidth < 320) { windowWidth = 320; } //2. 标准屏幕的宽度 var StandardWidth = 375; // 标准屏幕的html的字体大小 var StandardHtmlFontSize = 100; //3. 当前屏幕需要设置的根元素的字体大小 //要设置的根元素字体大小 = 当前屏幕宽度 / 标准屏幕宽度 * 标准屏幕的html的字体大小 var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize; //4. 把当前计算的html 字体大小设置到页面的html元素上就可以 document.querySelector('html').style.fontSize = htmlFontSize + 'px'; }
将以上代码引入项目的每个html文件。
例如我用MUI框架开发项目,项目文件结构搭建好,引入相应的MUI框架文件,要把引入的MUI框架的css样式用rem转换工具,将px单位的属性转换为rem,进行替换。
转换的比例,假如我的设计稿宽度为375px,我将根元素字体大小设置为100px(为了方便计算),这个html {font-size: 100px;}是设置给项目的css公共样式。
接着开发项目就可以用rem单位。移动端rem适配就这样完成了。当然要记得导入视口。
© 版权声明
文章版权归作者所有,未经允许请勿转载。