当pc端、移动端H5等项目中，需要根据当前浏览器窗口或屏幕尺寸，来自适应的改变页面内元素尺寸时，就可以借助下述插件和相关配置来实现。
npm install postcss-pxtorem --save
npm install amfe-flexible --save
下载完之后：package.json
{
"name": "baseh5",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"less": "^4.2.0",
"postcss-pxtorem": "^6.1.0",
"vue": "^3.4.31"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"typescript": "^5.2.2",
"vite": "^5.3.4",
"vue-tsc": "^2.0.24"
}
}
main.ts中进行引入import { createApp } from 'vue'
import App from './App.vue'
import 'amfe-flexible' // 在`main.ts`中进行引入
createApp(App).mount('#app')
vite.config.ts中进行配置import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里 - 引入pxtorem插件
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
plugins: [vue()],
// 引入pxtorem插件 - ----------------------------------------------------
css: {
postcss: {
plugins: [
postCssPxToRem({
/*
配置在将px转化为rem时 1rem等于多少px，
(因为我们搭配使用了amfe-flexible插件，此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
当UI设计稿的全屏基准宽度是1920px时 此处设置的值为192
*/
rootValue: 75,
// propList - 配置方案1：所有px均转化为rem
propList: ['*']
/*
propList - 配置方案2：
若想设置部分样式不转化 可以在propList中配置，如：除border和font-size外，所有px均转化为rem
propList: ["*", "!border","!font-size"],
*/
})
]
}
},
// 引入pxtorem插件 - ----------------------------------------------------
resolve: {
alias: {
'@': fileURLToPath(new URL('./src/', import.meta.url))
}
}
})
可以设置一个元素的宽度为我们UI设计稿的基准宽度，使其正好占满一行，
此时，可以看到，不论浏览器窗口如何放大缩小，该元素宽度都是正好占满一行。
1、
postcss-pxtorem插件，会将我们写在样式中的px根据我们在vite.config.ts中设置的rootValue值，按比例转化为rem。
但是，行内样式中的px，不会被转化为rem。
2、
amfe-flexible插件会根据当前可展示区域的实际宽度，动态设置的font-size为可展示区域宽度的十分之一，
这也就是，为什么我们在vite.config.ts中设置rootValue值时需要设置为UI设计稿的十分之一，
是为了，与此插件对font-size的设置相对应。
3、rem单位的特点是，1rem对应的px值等于的font-size值，
也就是说，当的font-size值变化时，1rem的值会跟随着动态变化，
比如：
有一个div，它的高度设置为1rem，
当页面内的font-size为16px时，这个div的高度就是16px；
当页面内的font-size为32px时，这个div的高度就是32px；
用这种方案做 H5 的时候，在手机上打开，页面可以被缩放，就有些不专业了
可以用下面这种方法解决：
在 index.html的 head 标签中，添加以下代码，即可
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<!-- 禁止在手机端缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--禁止在电脑浏览器滚轮缩放 -->
<script>
document.addEventListener('mousewheel', function (e) {
e = e || window.event;
if ((e.wheelDelta && event.ctrlKey) || e.detail) {
event.preventDefault();
}
}, {
capture: false,
passive: false
})
</script>
</head>
在 package.json 文件中，安装 "vconsole": "^3.15.1" 这个依赖
然后，在 main.ts 文件中，如下
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'amfe-flexible'
import Vue3TouchEvents from 'vue3-touch-events'
import Vconsole from 'vconsole'
const app = createApp(App)
// 解开这个注释，就会添加vConsole
// let vConsole = new Vconsole()
app
.use(Vue3TouchEvents as never)
.use(router)
.mount('#app')