vue3 + vite +ts 大屏适配

1.使用pnpm安装：

pnpm add amfe-flexible
pnpm add postcss-pxtorem @types/postcss-pxtorem

2.使用npm安装：

npm i amfe-flexible --save
npm i postcss-pxtorem @types/postcss-pxtorem -D 

在main.ts配置：

import 'amfe-flexible';

 

在vite.config.js配置：

import postCssPxToRem from 'postcss-pxtorem'


export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 192, // 这里每次根据需要修改 = viewWidth/10
          propList: ['*'],
          exclude: /node_modules/i, // 默认值，忽略项目依赖项的像素转换
        }),
      ],
    },
  }
})

 

温馨提示：amfe-flexible  不支持行内样式。

一般我们开发项目的时候喜欢使用组件，如果vue3开发网站使用element-plus。你会发现使用组件的时候，放大和缩小页面会改变，是因为使用行内样式导致的。解决方式：强制改变样式，可以使用 ::v-deep(.el-button)、/deep/ .el-button或者class。

例如button：   <el-button type="primary" class="btns">这是一个按钮</el-button>

.btns {
  width: 40px;
  height: 40px;
  font-size: 10px;
  padding: 10px 0;
  margin: 0;
  display: block;
  border-radius: 5px;
  position: relative;
}   // 里面的样式可以根据自己的需求改变其默认样式。
这样放大和缩小组件就适配了。

个人建议：尽量能不使用组件就不使用组件，因为修改起来很麻烦，如果是button这种简单的很好修改，但凡涉及到一些复杂的组件，比如日历组件，你要去修改很多标签样式。所以我上面那么多描述都是废话文学没有任何意义，还是自己封装手写吧。