前端开发--移动端

最新推荐文章于 2024-07-10 11:49:32 发布

原创最新推荐文章于 2024-07-10 11:49:32 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端rem与px的设置

前端知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Vue项目中实现响应式布局的方法，通过自定义rootFont.js文件，根据屏幕宽度动态调整根元素的字体大小，实现1rem等于100px的比例，适用于不同尺寸的设备。

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

vue中rem的使用

在vue定义一个rootFont.js文件，将以下代码写入该文件中
const rootFont = function () {
let docEl = document.documentElement;
let resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;
let recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) { return; };
if (clientWidth >= 750) { // 750这个值，根据设计师的psd宽度来修改，是多少就写多少，现在手机端一般是750px的设计稿，如果设计师给的1920的psd，自己用Photoshop等比例缩小
docEl.style.fontSize = ‘100px’;
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px’; // 750这个值，根据设计师的psd宽度来修改，是多少就写多少，现在手机端一般是750px的设计稿，如果设计师给的1920的psd，自己用Photoshop等比例缩小
}
};

if (!document.addEventListener) { return; };
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener(‘DOMContentLoaded’, recalc, false);
};

export default rootFont;
在vue的入口文件中引入rootFont.js文件
import rootFont from ‘./目录/rootFont.js’;
rootFont();
得出宽度和字体大小的比值为
1rem = 100px;