0
点赞
收藏
分享

微信扫一扫

[vue] 项目使用rem 单个组件 PC端自适应大屏


rem.js

export function resetRem() {
// 基准大小
baseSize = 100;
const basePc = baseSize / 1440; // 表示1440的设计图,使用100PX的默认值
const vW = window.innerWidth; // 当前窗口的宽度

const rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
document.documentElement.style.fontSize = `${rem}px`;
}

import { resetRem } from '@/util/rem';

created() {
resetRem();
// 改变窗口大小时重新设置 rem
window.onresize = () => {
resetRem();
};
},

font-size: 0.17rem;

参考:

​​使用rem配置PC端自适应大屏​​

​​vue部分页面重置rem比例​​


举报

相关推荐

0 条评论