巧用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);
   }
複製代碼