大屏自适应

vue2.0+vue.cli的大屏自适应架构搭建

使用的是postcss-plugin-px2rem插件

1、首先配置pack

{
  "dependencies": {
    "postcss-plugin-px2rem": "^0.8.1",
    "vue": "^2.6.11",
    "vue-fullscreen": "^2.6.1",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^6.1.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "precss": {}
    }
  }
}

cli不要高过5.0否则postcss-label会升级至7.0导致postcss-plugin-px2rem无法正常解读scss文件（纯css可以忽略版本限制）

2、vue.config.js

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

3、附送一份set

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

    // 这个if语句代码，是用来控制屏幕的最小宽度，不需要可以可以不写
    if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= 50) {
      document.documentElement.style.fontSize = '50px'
    }
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.addEventListener('resize', setRem)
}

在main.js引用即可

import { setRemInit } from 'set地址'

setRemInit （）