vue项目pc端适配不同分辨率屏幕字体和整体布局适应

第一部分：项目全局引入lib-flexible

1.项目中安装lib-flexible

npm install lib-flexible --save

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

import 'lib-flexible'

打开./node_modules/lib-flexible/flexible.js，找到如下片段源码： 

 

第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem

 1、安装postcss-px2rem-exclude 

npm install postcss-px2rem-exclude --save

2、配置 postcss-px2rem-exclude 

方法(1).在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码 

 module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }
}

方法(2).若没有.postcssrc.js这个文件的话，就找配置文件里面的package.json打开，下面代码整体添加到里面,也可行

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 192,
        "exclude": "/node_modules|floder_name/i"
      }
    }
  }

 主要应用:lib-flexible和postcss-px2rem-exclude

重启项目即生效！