vue pc端适配

在项目中用到UI给出设计图尺寸是1920x1080，如果直接在样式中使用会导致比想象中要大很多，这样需要做px转换为rem来适应屏幕，网上查了很多方法，下面是总结出的一种方法，亲测有效

1.安装依赖 postcss-px2rem-exclude

 npm install postcss-px2rem-exclude --save-dev

2.创建个rem.js文件，用于计算文档字体大小，我是放到utils下面的看个人习惯

// 设置 rem 函数
function setRem() {
  let pageWidth = window.innerWidth;
  //为了ie也能拿到可视窗口宽度
  if (typeof pageWidth != "number") {
    //标准模式
    if (document.compatMode == "CSS1Compat") {
      pageWidth = document.documentElement.clientWidth;
      //怪异模式
    } else {
      pageWidth = document.body.clientWidth;
    }
  }
  if (pageWidth <= 750) {
    const baseSize = 75
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / pageWidth
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  } else if (pageWidth > 750 && pageWidth <= 1200) {
    const baseSize = 85
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / pageWidth
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  } else {
    const baseSize = 100
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js 中引入该文件

import '@/utils/rem'

3.配置下载的依赖

在项目根目录找到.postcssrc.js，添加如下代码

module.exports = {
  "plugins": {
    //配置这一段
    'postcss-px2rem-exclude':{
       "remUnit": 100,//转换基数
        exclude:/node_modules|folder_name/i     //过滤依赖文件，防止第三方UI组件样式被干扰
    }
  }
}

如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。

"postcss": {

    "plugins": {

      "autoprefixer": {},

      "postcss-px2rem-exclude":{

          "remUnit": 75,

          "exclude":"/node_modules|floder_name/i"

      }

    }

  }

注意：

    1.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。

   2.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用postcss-px2rem-exclude自动将css中的px转成rem

  3.在引入依赖后，就可以直接使用rem了，例如UI的尺寸是300px ，在样式直接写300rem就可以了，但是，会出现一个问题，第三方组件的UI整体变小了，这里还需要配置一个地方，项目build目录下找到utils.js文件，找到generateLoaders方法，做如下修改：

function generateLoaders (loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]//将这行改为下面这行
 const loaders = options.usePostCSS ? [cssLoader] : [cssLoader]

保存后重新编译项目就解决问题了