目录 1、安装postcss-pxtorem 和 autoprefixer 2、vite.config.js引入并配置 3、App.vue(自适应才需要) 自动添加前缀: 自适应: 1、安装postcss-pxtorem 和 autoprefixer npm install postcss-pxtorem --savenpm i au
目录
- 1、安装 postcss-pxtorem 和 autoprefixer
- 2、vite.config.js引入并配置
- 3、App.vue(自适应才需要)
自动添加前缀:
自适应:
1、安装 postcss-pxtorem 和 autoprefixer
npm install postcss-pxtorem --save npm i autoprefixer
2、vite.config.js引入并配置
import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // 引入⬇️ import postCssPxToRem from 'postcss-pxtorem' import autoprefixer from 'autoprefixer' const pathResolve = (dir) => { return resolve(__dirname, ".", dir) } const alias = { '@': pathResolve("src") } export default ({ command }) => { const prodMock = true; return { base: './', resolve: { alias }, server: { port: 3004, host: '0.0.0.0', open: true, }, build: { rollupOptions: { output: { manualChunks: { } } } }, plugins: [ vue(), ], css: { postcss: { // ⚠️关键代码 plugins: [ postCssPxToRem({ // 自适应,px>rem转换 rootValue: 16, // 1rem的大小 propList: ['*'], // 需要转换的属性,这里选择全部都进行转换 }), autoprefixer({. // 自动添加前缀 overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" //'last 2 versions', // 所有主流浏览器最近2个版本 ], grid: true }) ] }, } }; }
3、App.vue(自适应才需要)
<template> <div id="app"> </div> </template> <script setup> // 自适应 function resize() { let fs = document.body.clientWidth / 75; // 上面的75是根据设计图尺寸修改,例如设计图宽为1220,给左右两边各留10px,即1220-20=1200,1200/16(字体大小)等于75 if (fs > 16) { // 控制字体大小,以免过大过小 fs = 16; } else if (fs < 14) { fs = 14; } //