当前位置 : 主页 > 网络编程 > JavaScript >

vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀

来源:互联网 收集:自由互联 发布时间:2023-02-01
目录 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;
		}
        //  
网友评论