postcss-px-to-viewport做前端自适应,适用于pc和移动
1.下载 postcss-px-to-viewport 插件
npm i postcss-px-to-viewport
2.在vite.config.ts中添加配置
import pxtovw from 'postcss-px-to-viewport' const loder_pxtovw = pxtovw({ //这里是设计稿宽度 自己修改 viewportWidth: 1920, viewportUnit: 'vw' }) export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [loder_pxtovw] } }, resolve: { alias: { '@': resolve('./src') } }, base: './', // 打包路径 server: { port: 4000, // 服务端口号 open: true, // 服务启动时是否自动打开浏览器 cors: true // 允许跨域 }, })
- postcss-px-to-viewport viewport postcss vue3 vitepostcss-px-to-viewport viewport postcss vue3 postcss-px-to-viewport postcss postcss-px-to-viewport postcss-pxtorem postcss-px-to-viewport viewport postcss nuxt postcss-px-to-viewport插件viewport postcss postcss-px-to-viewport viewport postcss px postcss-px-to-viewport插件viewport屏幕 postcss vite vue3_vite_kbnet vue3-ts-uniapp-vite