效果如下
使得大屏不论在什么宽高比例依然能展示全部数据
安装
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适配)