数据可视化大屏
前端日常开发工作中,经常会遇到一些大屏的项目需求,例如一个3 * 3的大屏,实际屏幕尺寸为5760 * 3240,但是我们拿到的设计稿尺寸为1920 * 1080,5 * 3的大屏,实际屏幕尺寸为9600 * 3240,但是我们拿到的设计稿尺寸为3200 * 1080,可以看出拿到的设计稿基本上为实际尺寸/3的尺寸比例,那我们怎么在自己的开发环境中调试呢?并且达到屏幕适配呢?
使用amfe-flexible
amfe-flexible主要用于解决移动端的适配问题,amfe-flexible将html的font-size设置为屏幕分辨率宽/10,即1920 * 1080的分辨率html的font-size就应该是192。
安装
npm install amfe-flexible -S
使用
// main.js引入
import 'amfe-flexible';
借助rem
rem是CSS3新增的相对长度单位,是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。 使用amfe-flexible将html的font-size设置为屏幕分辨率宽/10后,我们就可以根据根元素html的大小计算。
根html的font-size为192;
// px
.dom {
width: 100px;
}
// 自动转换成rem
.dom {
// 100/192
width: 0.52083333rem;
}
但是我们一个页面会有很多的px单位,如果每一个都需要手动去计算,会增加很大一部分工作量,所有我们可以使用postcss-pxtorem
,引入一个自动计算的包将我定义的px自动转为rem单位。
使用postcss-pxtorem
postcss-pxtorem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值
npm install postcss-px2rem -S
配置postcss-pxtorem 新建.postcssrc.js文件
module.exports = {
"plugins": {
'postcss-pxtorem-include': {
include: 'src/views/fullScreen/*', // 制定转换的目录
rootValue: 320, // 设置根据多大设计稿尺寸
unitPrecision: 6,
propList: ['*'],
},
}
}
注意:include可以指定需要转换px - rem的目录或者文件 rootValue需要特别注意,这个值是你拿到的设计稿的宽度/10,例如1920 * 1080的设计稿,此处rootValue:192,如果设计稿的尺寸为3200 * 1080(5*3)的尺寸,此处rootValue: 320;
分析
3*3大屏 设计稿尺寸 1920 * 1080 实际投屏尺寸 5760 * 3240 我们按照设计稿的尺寸设置一个DOM
//根html的font-size:192
.dom {
width: 200px;
height: 200px;
}
// 转为rem
.dom {
// 200/192
width: 1.0416666667rem;
height: 1.0416666667rem;
}
在实际投屏尺寸 5760 * 3240中,DOM对应的实际宽高计算如下:
// 根html的font-size: 576
.dom {
// 1.0416666667 * 576
width: 600px;
height: 600px;
}
实例查看
5 * 3 大屏 设计稿尺寸 3200 * 1080 实际投屏尺寸 9600 * 3240
//根html的font-size: 320
.dom {
width: 200px;
height: 200px;
}
// 转为rem
.dom {
// 200/320
width: 0.625rem;
height: 0.625rem;
}
在实际投屏尺寸 9600 * 3240中,DOM的实际宽高计算如下:
// 根html的font-size: 960
.dom {
// 0.625 * 960
width: 600px;
height: 600px;
}
实例查看
如遇到echarts等需要动态设置大小的。
// num为设置的大小(px)
function getSizeByScreen(num) {
// 这里的3200为你设计稿的宽度。
return Math.ceil((num / 3200) * window.screen.width);
}