---
title: "vueCli3下pc多分辨率自适应解决方案"
id: "3195"
type: "post"
slug: "vuecli3%e4%b8%8bpc%e5%a4%9a%e5%88%86%e8%be%a8%e7%8e%87%e8%87%aa%e9%80%82%e5%ba%94%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88"
published_at: "2020-12-13T14:35:45+00:00"
modified_at: "2020-12-13T14:35:45+00:00"
url: "https://seq.ink/all/3195.html"
markdown_url: "https://seq.ink/all/3195.html.md"
excerpt: "！注意仅为适应各种分辨率屏幕，不包含平板以及移动设备。单纯做移动设备响应适配请移步到flexible+px2rem 解决方案 vueCli3下自适应解决方案 postcss-plugin-px2rem 将css中px转换为rem 安装命令 ..."
taxonomy_category:
  - "ALL"
  - "Coding代码堆"
---

！注意仅为适应各种分辨率屏幕，不包含平板以及移动设备。单纯做移动设备响应适配请移步到flexible+px2rem 解决方案

# vueCli3下自适应解决方案

**postcss-plugin-px2rem**

- 将css中px转换为rem
- 安装命令 `npm i -S postcss-plugin-px2rem`
- 项目根目录下新建 `vue.config.js` 配置文件

```
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 192, //设计稿宽度/10
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            // mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            // minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
};
```

- 在src目录下新建rem.js文件

```
export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener("resize", setRem);
}
```

在main.js中引用rem.js

```
import { setRemInit } from '../src/rem';

setRemInit(); *//进行初始化立即运行*
```