vite+vue3 css scss PC移动布局自适应

1. 安装 postcss-pxtorem 和 autoprefixer

npm install postcss-pxtorem autoprefixer --save

2. vite.config.js引入并配置

import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'

export default defineConfig({
  base: './',
  resolve: {
    alias
  },
  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
                })
            ]
        }
    }
})

4. 在根目录src下建立文件夹utils，然后创建rem.js文件 并在main.js中引入

• PC端 rem.js

// 自适应
const baseSize = 16;
function resize() {
    // 当前页面屏幕分辨率相对于1920宽的缩放比例，可根据自己需要修改
    let scale = document.documentElement.clientWidth / 1920;
    // 下面这一行代码可以忽略，这是我另外加的，我加这行代码是为了屏幕宽度小于1280时就不继续等比缩放了
    if (document.documentElement.clientWidth < 1280) scale = 1280 / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`;
}
resize();
window.onresize = resize;

• 移动端rem.js

// 自适应
    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;

• main.js 引入

import './utils/rem.js'

• 也可直接写在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;
        }
        // 👇注意这里不能直接document.body.style
        document.body.parentNode.style = "font-size: " + fs + "px;";
    }
    resize();
    window.onresize = resize;
</script>