【 pc大屏适配 】大屏适配的方法

开发中不免会遇到很多适配的需求，那么如何做适配呢，接下来一起看看吧

首先做适配我们需要了解需求，如何适配，按照什么比例适配，下面的适配方式针对于比例适配 vue2项目

（1）添加一个配置文件postcss.config.js ，与src同级

代码如下，可复制

module.exports = {

    plugins: {

      autoprefixer: {},

      "postcss-pxtorem": {

        "rootValue": 12,

        "propList": ["*"]

      }

    }

  }

（2）安装插件 postcss-pxtorem

npm install postcss-pxtorem@^5.1.1

(3) 添加一个 rem.js，并在main.js中引入

代码如下，可复制

// rem等比适配配置文件

// 基准大小

const baseSize = 12

// 设置 rem 函数

function setRem () {

  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。

  const scale = document.documentElement.clientWidth / 1920

  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）

  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

// window.onresize = function () {

//   setRem()

// }

window.addEventListener('resize',()=>{

  setRem()

})

按照以上方法，适配的配置已经完成，接下来就按照常规写css的方式，插件和配置会自动将px换算为等比rem！！！重点注意来了，插件和配置对行内样式不生效，所以 尽量不要用行内样式，如果一定需要行内样式，请将单位换位rem！！！

vscode中可安装插件 px to rem & rpx & vw (cssrem)，在写css时，会提示px和rem换算