关于vue3+vite完全放弃modules.export导出方式后,进行rem适配的一些注意点
rem适配 vue3 vite
·
第一是rem适配布局,首先安装两个插件
// 作用:把px单位自动转成rem单位 (作用: 就是之前安装的vscode的插件的作用)
yarn add postcss-pxtorem
// 修改rem基准值的js插件 需要在打包后需要使用
// 作用: 根据设置屏幕的宽度去调整rem的值(html标签上font-size的大小)
// 它的默认计算方式是屏幕宽度的1/10,默认值是37.5
yarn add amfe-flexible
其次 新建配置文件 postcss.config.js(在根目录下创建)
配置 postcss 插件 (37.5 计算方式 => 屏幕宽度 / 10) 设计图对应的标准屏, 其他屏幕会自适应缩放的
原本modules.export导入的语法
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
注意虽然webpack可以用于搭建vue3项目,但是在vite中这种写法是会报错的,且不要直接点击vscode的自动修复,它可能会把你带沟里
//在vite中的正确写法
export default {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
接着是两种方式,要么在main.js或main.ts中导入
import 'amfe-flexible'
或者在src文件夹下新建一个utils文件夹,准备一个rem.js文件
const baseSize = 37.5; //32
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem();
}
推荐第二种方法,比较稳妥,第一种不知何故会失效
更多推荐
已为社区贡献1条内容
所有评论(0)