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

2022-10-20 09:31:19 作者：RainHg

这篇文章主要介绍了vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

自动添加前缀：

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">
</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;
        // 👇注意这里不能直接document.body.style
		document.body.parentNode.style = "font-size: " + fs + "px;";
	resize();
	window.onresize = resize;
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vue3.0中使用postcss-pxtorem的具体方法
vue自适应布局postcss-px2rem详解
关于vue利用postcss-pxtorem进行移动端适配的问题
vue大屏自适应的实现方法(cv就能用)
Vue3+Element Plus按需引入(自动导入)详解
2022-10-10
vue创建项目卡住不动,vue create project卡住不动的解决
2022-10-10
vue3+Echarts页面加载不渲染显示空白页面的解决
2022-10-10
vue项目如何引入json数据
2022-10-10
详解Vue3 SFC 和 TSX 方式调用子组件中的函数
2022-10-10
ant-design-vue中的table自定义格式渲染解析
2022-10-10
基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
2022-10-10
ant-design-vue中设置Table每页显示的条目数量方式
2022-10-10
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号