安装插件
shell
npm install postcss-pxtorem && amfe-flexible
main.ts
ts
import 'amfe-flexible';
vite.config.ts
ts
import postCssPxToRem from 'postcss-pxtorem';
...
// 响应式设置
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 192, // 1rem的大小
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
}),
],
},
},
App.vue
ts
import { BrowserSize } from '@/utils/index';
onMounted(() => {
BrowserSize();
});
// @/utils/index
export function BrowserSize() {
var docEl = document.documentElement,
clientWidth: number,
clientHeight: number,
clientWidth = docEl.clientWidth;
clientHeight = docEl.clientHeight;
if (!clientWidth) return;
if (!docEl.addEventListener) return;
// clientWidth = 1920;
// if (clientWidth < 1920) {
// clientWidth = clientWidth;
// }
docEl.style.fontSize = clientWidth / 10 + 'px';
}