vue3 使用 rem 创建 h5 项目以实现响应式配置

最编程 2024-03-02 18:08:44

...

第一步安装依赖：

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步 main.ts文件中导入

import "amfe-flexible/index.js";

第三步进行配置：

vue3 项目中创建 postcss.cinfig.js文件，这里是基于设计稿是750px的如果是375的就写37.5

module.exports = {
   css: {
       loaderOptions: {
         css: {},
         postcss: {
       plugins: [
         require("postcss-px2rem")({
           remUnit: 75
         })
       ]
     }
       }
   }
}

vue2 项目进行配置的：找到根目录下的.postcss.js文件

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      // rootValue: 422.4,//对应设计图宽度4224*1296
      // rootValue: 192,//对应设计图宽度1920*1080
      rootValue: 75,
      propList: ['*', '!border*'] //  表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem
    }
  }
}

第四步 vscode 安装pxtorem的插件
第五步：在项目中直接基于750的设计稿量出尺寸，然后再将px转化为rem就可以了。

上一篇：机器学习 p 检验的计算方法 p 值检验方法

下一篇： (二十）devops 持续集成开发--使用 jenkins docker 插件完成 docker 项目管道发布