效果如下
使得大屏不論在什么寬高比例依然能展示全部數據
安裝
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適配)