在做数据可视化大屏展示页面时,前端开发人员最大的愿望就是通过一种方案,能够适应所有屏幕的分辨率尺寸,作为在职场摸爬滚打前进的前端开发人员我们也都在努力的学习着。
这里介绍的使用插件的方式来实现的:==》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.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html