pc端使用postcss-pxtorem把px转成rem实现响应式变化

使用postcss-pxtorem实现pc端把px转成rem实现响应式随屏幕变化而变化

因为vue项目基本编写完成，但是项目没有优化，当浏览器窗口缩小，或者说切换笔记本这种类似的小屏幕时候会出现一些问题，布局会混乱。所以在我接手后让我解决这个问题，因为有过类似的项目所以第一想法就是把固定的px转成rem进行响应式变化。

第一步：安装环境

1.postcss-pxtorem插件自动将px单位转换成rem

npm install postcss-pxtorem

如果运行报错，则看看是否postcss-pxtorem安装完成，有时候会显示版本问题，只需要指定版本安装即可：

npm install postcss-pxtorem@5.1.1

同时相信不少人看到过其他文章中有需要安装 lib-flexible
如果你只要做pc端的适配，这个可以不用装
ib-flexible 根据屏幕宽度，自动设置html的font-size
lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用，为移动端的开发者带来了无穷的便利
注意事项： 由于lib-flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

第二步：创建rem.js

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小, 字体大小最小为12
  let fontSize = (baseSize * Math.min(scale, 2))>12 ? (baseSize * Math.min(scale, 2)): 12
  document.documentElement.style.fontSize = fontSize + 'px'
}
//初始化
setRem()
//改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
  setRem()
}

rem.js文件可以放在src目录下具体位置如图：

第三步：在main.js中引入rem.js

import rem from './rem.js'

第四步：在 Vue 项目文件夹下创建 postcss.config.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: 16,
      propList: ['*']
    }
  }
}

最后运行即可
如果运行失败可能是插件安装缺少部分

 "postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-pxtorem": "^4.0.1",
"postcss-url": "^7.2.1",    

如果运行失败
可以看看package.json有没有这几个组件，可以用命令安装，也可以直接复制到package.json里，执行npm install命令自动安装