vue-cli3项目使用px2rem插件做自适应

骑猪看日落 2023-01-16 02:49 196阅读 0赞

## 第一步，安装插件 ##

npm install postcss-px2rem px2rem-loader --save

## 第二步，在根目录src中新建util目录下新建px2rem.js等比适配文件 ##

// rem等比适配配置文件
    // 基准大小 1rem = 16px 基于1920px
    const baseSize = 16
    // 设置 rem 函数
    function setPx2Rem() {
        // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 1920
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
        document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
    }
    // 初始化
    setPx2Rem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
        setPx2Rem()
    }

## 第三步，在main.js中引入适配文件 ##

import "./utils/px2rem"

## 第四步，到vue.config.js中配置插件 ##

// 引入等比适配插件
    const px2rem = require('postcss-px2rem')
     
    // 配置基本大小
    const postcss = px2rem({
      // 基准大小 baseSize，需要和rem.js中相同
      remUnit: 16
    })
     
    // 使用等比适配插件
    module.exports = {
      lintOnSave: true,
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              postcss
            ]
          }
        }
      }
    }

## 注意：安装了postcss-px2rem但是影响了ui组件的样式 ##

### 1. postcss-px2rem不能忽略指定文件   需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem） ###

npm uninstall postcss-px2rem
    
    npm i postcss-px2rem-exclude -D

### 2.  在项目搭建的时候要选择配置文件的位置了 ###

对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等  或者也可以把配置信息放在 package.json 里面

### 3. 要是选择独立配置文件的 直接在根目录下  postcss.config.js内修改 ###

exclude  就是要忽略的文件

module.exports = {
        plugins: {
            autoprefixer: {},
            "postcss-px2rem-exclude": {
                "remUnit": 16,
                "exclude": /node_modules/i
            }
        }
    }

其他和postcss-px2rem配置一样