vue 实现pc端rem适配 vue cli3

长路漫漫，前端相伴

已于 2023-06-09 13:52:30 修改

阅读量959

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-13 17:24:11 首次发布

本文链接：https://blog.csdn.net/qq_58638897/article/details/128676982

版权

实现pc端rem适配需要下载

lib-flexible
lib-flexible 阿里伸缩布局方案
px2rem-loader

1.0安装 lib-flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save-dev
npm i postcss-px2rem --save

2.0引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

3, 配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中

 css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    }

4.0修改flexible.js

我们这里在安装好lib-flexible和 postcss-px2rem后全局搜索flexible.js或者refreshRem，flexible.rem总有一个能搜索到的。然后根据设计稿自行修改

把设置宽高下图红色方框内改成

 if (width / dpr < 810) {
      width = 810 * dpr;
    }
    if (width / dpr < 1300) {
      width = 1300 * dpr;
    }
    if (width / dpr < 1920) {
      width = 1920 * dpr;
    }
      if (width / dpr < 2560) {
      width = 2560 * dpr;
    }

5.0 此时代码px改为rem,即可自适应

6.0 vscode px转rem插件

vscode搜索px to rem插件