巧用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);
   }
复制代码