使用rem配置PC端自适应大屏

在做数据可视化大屏展示页面时，前端开发人员最大的愿望就是通过一种方案，能够适应所有屏幕的分辨率尺寸，作为在职场摸爬滚打前进的前端开发人员我们也都在努力的学习着。

这里介绍的使用插件的方式来实现的：==》postcss-pxtorem

利用 npm 来安装：npm install -S postcss-pxtorem

1. 配置rem.js文件

rem.js可以放在src文件夹下，我是放在src下的utils文件夹中

// 设置 rem 函数
function setRem () {
    //  PC端
    console.log('非移动设备')
    // 基准大小
    baseSize = 100;
    let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
    let vW = window.innerWidth; // 当前窗口的宽度
    let vH = window.innerHeight; // 当前窗口的高度
    // 非正常屏幕下的尺寸换算
    let dueH = vW * 1080 / 1920
    if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
      vW = vH * 1920 /1080
    }
    let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
    document.documentElement.style.fontSize =  rem + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
};

2. postcss-pxtorem配置

在使用npm安装这个插件之后会在vue的项目中生成一个postcss.config.js文件，接下来我们要在里面的配置了

 

module.exports = {
  plugins: {
    autoprefixer: { browsers: 'last 5 version' },
    rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
    propList: ["*"], //可以从px更改到rem的属性,值需要精确匹配。
    // 1.使用通配符 * 启用所有属性。 示例：['*']
    // 2.在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y )
    // 3.使用 与属性不匹配。! 示例：['*','letter-spacing']!
    // 4.将"非"前缀与其他前缀合并。 示例：['*','font*']!
    unitPrecision: 5, //允许REM单位增长到的十进制数字。
    propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
    propBlackList: [], //黑名单
    exclude: /(node_module)/,  //默认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
  }
}

在package.json文件中添加的代码

  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 100,
        "propList": [
          "*"
        ]
      }
    }
  },

3. 在main.js中导入

import './utils/rem'

4. 项目中实际使用

// 页面布局
<template lang="pug">
  div#screen-wrapper//大盒子
    div.header-wrapper//头部
    div.main-wrapper//主体
      div.mid-wrapper//里面的容器
      div.right-wrapper//里面的容器
      div.left-wrapper//里面的容器
</template>
// 这里是一个简单的上下布局
//css样式代码如下
#screen-wrapper
  width 100vw
  height 100vh
  background-size 100% 100%
  overflow hidden
  position relative
  .header-wrapper
    width:1920px
    height: 64px;
    overflow-x hidden
    position absolute
    left 0
    right 0
    top 0
    margin 0 auto
  .main-wrapper
    overflow hidden
    position absolute
    left 0
    right 0
    top 64px
    margin 0 auto
    width 1920px
    height calc(100% - 64px)
    display flex
    justify-content space-between
    align-items center
    .left-wrapper
      width 25%
      height 100%
    .mid-wrapper
      width 48%
      height 100%
    .right-wrapper
      width 25%
      height 100%

 

方案参考地址：
https://www.cnblogs.com/WhiteM/p/12720849.html

 https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html