【Vue】Vue3 pc 端配置 rem 响应式

原创

已于 2024-10-30 17:12:35 修改 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-12-11 14:21:46 首次发布

本文介绍了如何在Vite项目中安装并配置postcss-pxtorem插件，以便实现基于窗口宽度的响应式字体大小设置，同时引入amfe-flexible用于布局兼容性。

安装插件

npm install postcss-pxtorem && amfe-flexible

main.ts

import 'amfe-flexible';

vite.config.ts

import postCssPxToRem from 'postcss-pxtorem';

...

  // 响应式设置
  css: {
   
   
    postcss: {
   
   
      plugins: [
        postCssPxToRem({
   
   
          rootValue: 192, // 1rem的大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        }),
      ],
    },
  }