阅读 7158

巧用rem实现数据可视化大屏

数据可视化大屏

前端日常开发工作中,经常会遇到一些大屏的项目需求,例如一个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);
   }
复制代码
文章分类
前端
文章标签