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

效果如下

使得大屏不论在什么宽高比例依然能展示全部数据

安装

npm install -S postcss-pxtorem

rem配置思路

原先的rem函数是能解决大部分的问题的，如果展示不全，也可以用滚动条。

但是大屏展示又不能使用滚动条，又必须展示全部的内容，这个时候就需要改变原来的计算方式，需要根据屏幕的实际高度来计算对应的屏幕宽度

1. 配置rem.js文件

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

初始的rem配置

// 设置 rem 函数
function setRem () {
    //  PC端
    console.log('非移动设备')
    // 基准大小
    baseSize = 100;
    let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
    let vW = window.innerWidth; // 当前窗口的宽度

    let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
    document.documentElement.style.fontSize =  rem + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
};

修改后的rem配置

// 设置 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配置

postcss的配置项

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

主要使用了两个配置项，我的配置如下

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "animate.css": "^3.7.2",
    "echarts": "^4.2.1",
    "element-ui": "^2.11.1",
    "node-sass": "^4.13.1",
    "nprogress": "^0.2.0",
    "scss": "^0.2.4",
    "scss-loader": "0.0.1",
    "v-charts": "^1.19.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.2",
    "lib-flexible": "^0.3.2",
    "postcss-pxtorem": "^4.0.1",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "px2rem-loader": "^0.1.9",
    "sass-loader": "^7.3.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-particles": "^1.0.9",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 100, // 必须要和rem.js内容中的baseSize一样
        "propList": [
          "*"
        ]
      }
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

3. 在main.js中导入

import './utils/rem'

4. 项目中实际使用

至此，一个适配不同尺寸的大屏展示方案就算初步完成了，下面我们看html布局和css代码

html部分，配置pug就不说了

<template lang="pug">
  div#screen-wrapper
    div.header-wrapper
    div.main-wrapper
      div.mid-wrapper
      div.right-wrapper
      div.left-wrapper
</template>
// 这里是一个简单的上下布局
<script src="./control.js"></script>

<style scoped lang="stylus" src="./style.styl"></style>

css部分，使用的是styls。

大屏的展示部分一定要使用px来设定宽高，使用绝对定位来让元素定位在水平垂直居中。

我的设计稿是按1920*1080，如果是一个比例，肯定就不会变动，但是当屏幕的实际高度小于这个展示应有高度的时候，rem就会重新计算，这个时候我就能让页面能完全居中展示

#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%

这个方案也不是很完美，由于一时间难以重做整个大屏，只能在原先的基础上修改，所以参考了大屏上的全屏页面的自适应适配方案,该篇文章有一整套解决方案，经过测试是可以实现的大屏完全展示，效果实现和参考文章内的demo效果是一样的



参考资料:

大屏上的全屏页面的自适应适配方案

vue3.0中使用postcss-pxtorem

vue+px2rem实现pc端大屏自适应(rem适配)